angularjs2 ionic2 备忘

1. ionic g page 的问题

       ionic cli 更新到3.0之后，原来生成page的方式换掉了，将每一个页面声明为独立的module，因此支持通过url地址直接跳转指定的页面。使用NavController 进行页面跳转的时候，已经无需再引入具体的page，直接使用 this.nav.push("page-name") 进行跳转即可。

2. ionic2 中使用 pipe的问题

      由于page的声明变成module，因此会导致 angular2中声明的pipe的方式在 ionic2 中不能完全工作。因为angular2 中创建pipe之后，在 app.module 里面声明一下，全局可用，但是 ionic2 的每个page都是独立的module，要在page中直接使用pipe就不可行了，而且不能在 page.module 中再去import 那个pipe, 会报 pipe 再不同模块中引用的错误，因此，我们可以将 pipe 整个声明为一个 module，在需要pipe的地方，将整个 module 引入。

pipe.module的声明

 import { NgModule }      from '@angular/core';
 import { ApplicationTypePipe } from './application-type/application-type';

 @NgModule({
     imports:        [],
     declarations:   [ApplicationTypePipe],
     exports:        [ApplicationTypePipe],
 })

 export class PipesModule {

   static forRoot() {
      return {
          ngModule: PipesModule,
          providers: [],
      };
   }
 } 

具体的pipe实现不贴出了，就是 angular2 的实现方式

需要引用 pipe的地方

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ApplicationDetailPage } from './application-detail';

import {PipesModule} from '../../pipes/pipes.module'

@NgModule({
  declarations: [
    ApplicationDetailPage
  ],
  imports: [
    IonicPageModule.forChild(ApplicationDetailPage),
    PipesModule.forRoot()
  ],
  exports: [
    ApplicationDetailPage
  ]
})
export class ApplicationDetailPageModule {}

3. 使用 webpack 打包的项目，执行 ng serve 运行，使用域名进行访问时，出现 Invalid Host Server 错误

解决办法：在执行的时候，增加 disableHostCheck=true 参数即可。

ng serve --host=192.168.1.111 --disableHostCheck=true

4. @ionic-native/mobile-accessibility 组件安装报错

错误如下

Failed to install 'phonegap-plugin-mobile-accessibility': CordovaError: Failed to fetch plugin https://github.com/apache/cordova-plugin-network-information.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code 1
npm ERR! Command failed: C:\Program Files\Git\cmd\git.EXE submodule update -q --init --recursive
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: basename: command not found
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: sed: command not found
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 18: .: git-sh-setup: file not found
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wangli\AppData\Roaming\npm-cache\_logs\2019-01-04T08_40_31_199Z-debug.log
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\plugman\fetch.js:173:37
    at _rejected (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:864:24)
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:890:30
    at Promise.when (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31)
    at Promise.promise.promiseDispatch (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:41)
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:624:44
    at runSingle (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:137:13)
    at flush (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

(node:20436) UnhandledPromiseRejectionWarning: CordovaError: Failed to fetch plugin https://github.com/apache/cordova-plugin-network-information.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code 1
npm ERR! Command failed: C:\Program Files\Git\cmd\git.EXE submodule update -q --init --recursive
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: basename: command not found
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: sed: command not found
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 18: .: git-sh-setup: file not found
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wangli\AppData\Roaming\npm-cache\_logs\2019-01-04T08_40_31_199Z-debug.log
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\plugman\fetch.js:173:37
    at _rejected (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:864:24)
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:890:30
    at Promise.when (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31)
    at Promise.promise.promiseDispatch (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:41)
    at C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:624:44
    at runSingle (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:137:13)
    at flush (C:\Users\wangli\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
(node:20436) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:20436) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

问题原因：下载 cordova-plugin-network-information 这个插件失败导致

解决办法：独立安装 cordova-plugin-network-information 这个插件

ionic cordova plugin add cordova-plugin-network-information

npm install --save @ionic-native/network

然后再安装 mobile-accessibility 即可成功

 

5. 升级到ionic4之后真机调试输出日志

使用如下指令

ionic cordova run android -l --address=10.150.1.1 --consolelogs

这个指令相当于以前的 ionic cordova run android -l -c。

其中 --address 替换成本机地址，不然在手机上会寻址成 localhost 从而报错。

Android 9.0 (API level 28) 以上，Google 对网络安全增加了限制，不允许使用明文的传输请求，即 http，从而导致了运行上述指令时会报ERR::CLEARTEXT_NOT_PERMITTED 的错误，此时需要做如下修改：

首先修改 config.xml，增加配置 android:usesCleartextTraffic="true"：

<platform name="android">
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application ...... android:usesCleartextTraffic="true" />
    </edit-config>
    ......
</platform>

然后，在项目的 /resources/android/xml 中找到 network_security_config.xml，增加你真机运行时的IP地址，即上方 --address=10.150.1.1 的那个IP

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>localhost</domain>
        <domain>10.150.1.1</domain>
    </domain-config>
</network-security-config>