將 angular 專案變成 android app (使用cordova) -- 專案建置篇

這篇文章將說明如何將一個既有的 angular 專案，整合進 cordava 專案， 讓 cordava 將此 angular 專案 build 成 一個 apk

專案開始前必須先設定可以建立 apk 檔案的環境，
包含以下
APK 建立工具

1. java-- openJDK
2. Android Studio

輔助前端專案生成 APK 工具

1. Cordova

前端Angular專案開發工具

1. nodeJS
2. Angular

請參考這篇
將 angular 專案變成 android app (使用cordova) -- 工具安裝設定篇

1.建立一個 ng 專案

    $ ng new mytest
    

2.建立一個 cordova 專案

再建立一個 cordava 專案。

    $ cordova create cordavaApp
    

3.添加 android 平台到您的 cordova 專案

在 cordavaApp 資料夾底下執行。

    $ cordova platform add android
    

4.將兩個專案整合

1. node_modules ，package.json，package-lock.json
2. 除了 1 所列的 3 個項目，複製所有
cordavaApp 資料夾底下的資料到 mytest 底下。
3. 複製所有 cordavaApp\node_modules 裡的資料到
mytest\node_modules，如果有重疊資料請選擇 [ 略過這些檔案(S) ]。
4. 打開 cordavaApp\package.json，複製 "cordova" 項目到mytest\package.json

從 cordavaApp\package.json 複製以下這段到 mytest\package.json

    "cordova": {
        "plugins": {
            "cordova-plugin-whitelist": {}
        },
        "platforms": [
            "android"
        ]

    }
    

package.json (複製後的 mytest\package.json 完整檔案)

    {
            "name": "mytest",
            "version": "0.0.0",
            "scripts": {
                "ng": "ng",
                "start": "ng serve",
                "build": "ng build",
                "test": "ng test",
                "lint": "ng lint",
                "e2e": "ng e2e"
            },
            "private": true,
            "dependencies": {
                "@angular/animations": "~8.2.12",
                "@angular/common": "~8.2.12",
                "@angular/compiler": "~8.2.12",
                "@angular/core": "~8.2.12",
                "@angular/forms": "~8.2.12",
                "@angular/platform-browser": "~8.2.12",
                "@angular/platform-browser-dynamic": "~8.2.12",
                "@angular/router": "~8.2.12",
                "rxjs": "~6.4.0",
                "tslib": "^1.10.0",
                "zone.js": "~0.9.1"
            },
            "devDependencies": {
                "@angular-devkit/build-angular": "~0.803.15",
                "@angular/cli": "~8.3.15",
                "@angular/compiler-cli": "~8.2.12",
                "@angular/language-service": "~8.2.12",
                "@types/node": "~8.9.4",
                "@types/jasmine": "~3.3.8",
                "@types/jasminewd2": "~2.0.3",
                "codelyzer": "^5.0.0",
                "jasmine-core": "~3.4.0",
                "jasmine-spec-reporter": "~4.2.1",
                "karma": "~4.1.0",
                "karma-chrome-launcher": "~2.2.0",
                "karma-coverage-istanbul-reporter": "~2.0.1",
                "karma-jasmine": "~2.0.1",
                "karma-jasmine-html-reporter": "^1.4.0",
                "protractor": "~5.4.0",
                "ts-node": "~7.0.0",
                "tslint": "~5.15.0",
                "typescript": "~3.5.3"
            },
            "cordova": {
                "plugins": {
                "cordova-plugin-whitelist": {}
            },
            "platforms": [
                "android"
            ]
        }
    }
    

5.更改 mytest/angular.json 檔案

更改 "projects"-->"mytest" --> "architect" -->"build" -->"options"--->"outputPath"

原本

    "outputPath": "dist/mytest",
    

改為

    "outputPath": "www",
    

6.更改 mytest/src/index.html 路徑

    <base href="/">
    

改為

    <base href="./">
    

7.更改 mytest/tsconfig.json

原本

    "target": "es2015",
    

改為

    "target": "es5",
    

8.開始 build angular production 版本

到 mytest 資料夾執行以下。

    $ ng build --prod --aot
    

9.開始 build apk

到 mytest 資料夾執行下列。

    $ cordova build android
    

10.成功的話會出現APK檔案

成功會出現 apk 檔案在
mytest\platforms\android\app\build\outputs\apk\debug\app-debug.apk

11.安裝apk後開啟的畫面

12.注意事項

專案資料夾請不要放置在中文目錄下，會拋錯。

13.範例下載

完成範例

完成APK