構築 Cordova+Angular 的调试环境

2 年 ago
清, 宇
4 minutes

首先

因为在使用Cordova开发Android应用时遇到了一些调试问题，所以我写下了备忘录作为记录。
首先，这是为了自己而写的，可能会有说明不足的地方。
如果有需要的话，请随时指出，谢谢。

更新记录

    • 2020-03-26 – Angular CLI と cordova のプロジェクトディレクトリを同一にしました。

 

    • 2020-03-26 – Angular9で確認

 

    • 2020-03-26 – Visual Studio Codeでのデバッグがうまくいかない場合の対策を追記

 

    • 2020-03-26 – cordovaとAngular CLIプロジェクトを同一ディレクトリに統合

 

    • 2020-03-27 – Angular CLIのサブプロジェクトに対応

 

    • 2020-03-28 – おまけ: Angular Material

 

    • 2020-03-28 – おまけ: Material Design Icons

 

    • 2020-03-28 – おまけ: Roboto Font

 

    2021-11-05 – npxを利用

动机 jī)

动机非常简单，用三行字写下来就是这样的感觉。

「用Cordova+Angular+Android开发应用？遇到问题时如何进行故障排查和分析？」
「测试和发布后无法使用调试器进行故障排查简直可怕啊！！」
「我想在实际设备上设置断点进行调试啊～！」

所以，我进行了各种调查和尝试，最终成功了，现在我来总结一下。

有人说：“为什么不用Ionic呢？”我认为这个意见很有道理。
因此，请根据每个开发项目的情况来决定。
我需要使用最新的Angular+Cordova进行验证，所以目前没有使用Ionic。
另外，如果遇到Ionic上的问题，希望本文档可以作为解决方案和选择的参考。

前提 tí)

假设下列已经安装，接下来进行说明。

    • Windows10 Pro 64bit

 

    • Node.js 12.16.1

 

    • Angular CLI 9.1.8\0

 

    • Cordova 9 / cordova-android 8.0

 

    • Android Studio/Android SDK

 

    • VSCode 1.43.2

 

    VSCode – Cordova Tools

Cordova+Angular应用架构

当您搜索时，使用Angular/Angular CLI来构建Cordova的GUI部分有很多不同的配置。
大致上是像以下这样的感觉吗？

    • Cordovaプロジェクトの上にAngular CLIプロジェクトを上書きする。

 

    • Cordovaプロジェクトの直下にsrcディレクトリを作成して、そこにAngular CLIプロジェクトを作成する。

 

    CordovaプロジェクトとAngular CLIプロジェクトを独立させる。

我不会详细解释，但似乎没有常见的定石。
嗯，糟了…

以前，我们将Angular CLI和Corodova CLI项目的根目录放在同一目录层级中。以这种结构，我曾经以为不共享node_modules是安全的。但是由于调试环境的配置麻烦，我将Angular CLI项目目录和Cordova项目目录(cordova-angular)设置为相同的。

制作步骤

以下是创建一个示例项目的步骤，用于在VSCode中设置断点并在调试执行时停止处理。

创建项目

# cordovaプロジェクト生成
> npx cordova create cordova-angular net.kyosho.cordova.angular cordova-angular

# package.jsonバックアップ
> rename cordova-angular\package.json package.json.back

# Angularプロジェクト生成
> npx ng new cordova-angular --create-application=false --routing=false --style=scss

# Angularサブプロジェクト生成
> cd cordova-angular
> npx ng g application app --routing=true --style=scss

# androidプラットフォーム追加
> npx cordova platform add android

在之前的工作中，目录应该如下所示。

\---cordova-angular
    |   angular.json // Angular CLIの構成ファイル
    |   tsconfig.json
    |   
    +---hooks
    +---node_modules
    +---platforms
    +---plugins
    +---projects
    |   \---app // サブプロジェクトディレクトリ
    |       +---e2e
    |       |   \---src
    |       \---src
    |           |   index.html // ルートHTML
    |           |
    |           +---app
    |           |       app.component.html // 画面部分のHTML
    |           |       app.component.ts // 画面部分に対するバックグラウンド処理を記述するTypescript
    |           |
    |           +---assets
    |           \---environments
    \---www

修改文件

为了将ng build的输出目录更改为www目录，您需要按以下方式修改angular.json文件中的”outputPath”。
把 angular.json 文件的 “outputPath” 修改为 www 目录。

{
  ...
  "projects": {
    "angular-app": {
      "architect": {
        "build": {
        ...
          "options": {
            "outputPath": "www",
            ...
          },
        ...
    }},
    ...
}

将tsconfig.ts文件中的目标设定为ES5。

{
  "compilerOptions": {
    ...
    "target": "ES5",
    ...
  }
}

在Cordova应用程序的deviceready事件发生后，修改projects/app/src/main.ts以启动Angular。
如果没有这个设置，可能无法很好地使用Cordova插件的功能。

...
const onDeviceReady = () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
};

document.addEventListener('deviceready', onDeviceReady, false);

在项目的app/src/index.html文件中添加/修改，和。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/">

  <!-- meta name="viewport" を追加します。 -->
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

  <!-- meta http-equiv="Content-Security-Policy" を修正します。 -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>

  <!-- cordova.jsを参照します。 -->
  <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

为了在调试器中设置断点，我们将在projects/app/src/app/app.component.html中添加一个按钮。当按下按钮时，将在屏幕上显示当前时间。

<button (click)="clicked($event)">button</button>
<br />
{{message}}

在projects/app/src/app/app.component.ts文件中添加按钮点击事件处理程序(onClick()方法)。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  message = 'メッセージ';

  // HTML上のボタンをクリックすると呼ばれるメソッドです。
  clicked(event: Event) {
    this.message = (new Date()).toString();
    console.log(this.message);
  }
}

构建

完成上述的设置后，进行构建。

# Webアプリをビルドします。
# ビルド先は、../cordova-angular/www となります。
# "--base-href ./"は指定しないと表示されないので必ず付けてください。
> npx ng build --base-href=./

确认动作

# Android エミュレータ上で起動します。
> npx cordova emulate android

如果执行上述操作，则将启动以下Android应用程序。
如果在屏幕上显示了创建的Web应用程序，则表示成功。
点击（轻触）”button”按钮将显示当前时间。

004.png

使用VSCode进行调试

请对创建的样本进行调试。
请使用以下命令启动VSCode。
在启动时要指定cordova-project目录非常重要。

# VSCodeでcordova-angularディレクトリを開く
> code %ROOT%\cordova-angular

如果您尚未安装Cordova工具，请在此时安装。
单击VSCode左侧的“虫”按钮，将显示以下屏幕。
我认为在齿轮按钮上会有一个橙色的点，单击它可以选择调试环境。

005.png

有许多选项可供选择，但请选”Cordova”。

006.png

然后将创建launch.json文件，并应添加”在模拟器上运行Android”选项。
但是，如果保持原样，断点将无效，因此请在launch.json中添加sourceMapPathOverrides。

{
    "version": "0.2.0",
    "configurations": [
        ...
        {
            "name": "Run Android on emulator",
            "type": "cordova",
            "request": "launch",
            "platform": "android",
            "target": "emulator",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceFolder}",
            "ionicLiveReload": false,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${cwd}/projects/app/*",
                "webpack:///src/*": "${cwd}/projects/app/src/*",
                "webpack:///*": "${cwd}/projects/app/*",
                "webpack:///./~/*": "${cwd}/node_modules/*",
                "./*": "${cwd}/projects/app/*"
            }
        },
        ...
    ]
}

请将DEBUG CONSOLE设置为以下状态。快捷键为Ctrl+Shift+Y。

选择“在模拟器上运行Android”，然后点击调试播放按钮（绿色播放按钮）。

这将启动Android应用程序，就像在命令提示符下运行cordova emulate android一样。

在启动的Android应用程序上，点击“按钮”即可在屏幕的消息区域显示当前时间。

让我们在屏幕上放置一个断点（红色小圆点）。
点击与下面的屏幕截图相同的位置，即可放置。

007.png

请在设定断点后重新点击按钮”button”。
这样一来，您就可以暂停处理了！

008.png

如果在实际设备上出现问题，看起来我们可以进行调查。

赠品

ionic提供了各种各样的用户界面。虽然不能完全替代，但是我会写出引入Angular Material的步骤。如果有缺少的用户界面等，可以使用ionic进行创建，也可以自己创建界面，甚至可以使用其他开源软件！

Angular Material
– 角度材料

只需执行以下内容。
可能会有一些确认，只需直接按[Enter]键即可。

> npx ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? No
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1812 bytes)
√ Packages installed successfully.
UPDATE angular.json (4279 bytes)
UPDATE projects/camera-app/src/styles.scss (181 bytes)

安装Angular Material后，将添加以下标签。

<!doctype html>
<html lang="en">

<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  ...
</head>
...
</html>

因为从Google获取图标字体和字体，所以在离线时可能会出现错误。
另外，由于付出了努力，必须确保所有内容都在Cordova应用程序内完成。

本地安装图标和字体。

首先，我们会将图标安装到本地以便使用。接下来，需要安装以下内容。

> npm install --save material-design-icons
> npm install --save typeface-roboto

将 projects/app/src/index.html 的标签注释掉或删除。

<!doctype html>
<html lang="en">

<head>
  ...
  <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> -->
  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
  ...
</head>
...
</html>

可以将以下内容添加到projects/app/src/style.scss中。

...
@import 'material-design-icons/iconfont/material-icons.css';
@import 'typeface-roboto/index.css';
...

这样应该没问题！（应该的话……）

bannerAds