Ionic 2转换为Ionic 3：“离子构建iOS”上的“错误：无法转换程序”

Question

我一直在努力在Apple Mac机器上设置现有的Ionic 2项目。

我已经因为它是描述复制我的项目在这里 。

解决了一些Xcode问题后，最终应用程序在iPhone iOS物理设备上打开，但在启动画面后显示空白屏幕。

我发现如何在这里显示一些日志。 日志输入引导我到那个SO线程：“找不到模块离子原生” 。

我得出结论，我必须更新我的项目代码以匹配新设置来处理离子原生插件 。

对于每个插件，我应用了以下过程： ionic plugin rm [plugin name] ， ionic plugin add [plugin name] ， npm install --save @ionic-native/[plugin name] 。

我查看了我的代码，以便在某些components和providers程序中进行更改： { NativePlugin1, NativePlugin2 } from 'ionic-native'; 致： { NativePlugin1 } from '@ionic-native/native-plugin-1'; { NativePlugin2 } from '@ionic-native/native-plugin-2';

我修改了我的[离子项目文件夹] /src/app/app.module.ts并添加了：

// all declaration as it was like "import { NgModule } from '@angular/core';"
//plus declarations added to match new rules and add plugin in providers section
{ NativePlugin1 } from '@ionic-native/native-plugin-1';
{ NativePlugin2 } from '@ionic-native/native-plugin-2';
@NgModule({
  declarations: [
    ...
  ],
  imports: [...
  ],
  bootstrap: [IonicApp],
  entryComponents: [...
  ],
  providers: [
    NativePlugin1,
    NativePlugin2,
    ...
  ]
})
export class AppModule {}

我从package.json中删除了"ionic-native": "^2.7.0",因为它在我引用的SO线程的解决方案中建议：

您需要从package.json中删除“ionic-native”：“^ 3.5.0”，之后运行npm i。

然后我按顺序启动： sudo npm cache clear ， sudo npm install ，最后是ionic build ios ，我得到了：

“错误：无法转换程序”

在这个错误之上，我看到很多与ionic-native相关的错误，如下所示：

[14:22:15] typescript：src / services / custom-http / custom-http.ts，line：XX

  Property 'type' does not exist on type 'typeof Network'. LXX: return Network.type; 

我现在感到困惑，所以如果有人有提示，那将是受欢迎的。

要完成这里有一些额外的信息： ionic info给出：

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 7.3.1 Build version 7D1014

我的package.json是这样的：

{
  "name": "my project",
  "author": "my name",
  "homepage": "",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic-native/core": "^3.5.0",
    "@ionic-native/device": "^3.5.0",
    "@ionic-native/insomnia": "^3.5.0",
    "@ionic-native/keyboard": "^3.5.0",
    "@ionic-native/network": "^3.5.0",
    "@ionic-native/screen-orientation": "^3.5.0",
    "@ionic-native/splash-screen": "^3.5.0",
    "@ionic-native/sqlite": "^3.5.0",
    "@ionic-native/status-bar": "^3.5.0",
    "@ionic-native/vibration": "^3.5.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.0",
    "ionicons": "3.0.0",
    "ng2-translate": "^3.2.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "latest",
    "typescript": "2.0.3"
  },
  "description": "MyProject: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

在@suraj输入之后有些更新：我已经更新了我的package.json，例如：

{
  "name": "MyIonicProject",
  "author": "author name",
  "homepage": "",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/core": "^3.5.0",
    "@ionic-native/device": "^3.5.0",
    "@ionic-native/insomnia": "^3.5.0",
    "@ionic-native/keyboard": "^3.5.0",
    "@ionic-native/network": "^3.5.0",
    "@ionic-native/screen-orientation": "^3.5.0",
    "@ionic-native/splash-screen": "^3.5.0",
    "@ionic-native/sqlite": "^3.5.0",
    "@ionic-native/status-bar": "^3.5.0",
    "@ionic-native/vibration": "^3.5.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4",
    "ng2-translate": "^3.2.1"
  },
  "devDependencies": {
    "@ionic/app-scripts": "latest",
    "typescript": "~2.2.1"
  },
  "description": "LpjcaIonic: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

我按照离子3的更改日志更新 。

我删除了项目启动的node_modules目录： sudo rm -rf node_modules/然后做了一个nom install ， ionic platform rm ios ， ionic platform add ios ，最后是ionic build ios 。

我查看了日志，这是他们的内容：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@4.5.0
3 info using node@v6.9.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [MyIonicProject]@~prebuild: [MyIonicProject]@
6 silly lifecycle [MyIonicProject]@~prebuild: no script for prebuild, continuing
7 info lifecycle [MyIonicProject]@~build: [MyIonicProject]@
8 verbose lifecycle [MyIonicProject]@~build: unsafe-perm in lifecycle true
9 verbose lifecycle [MyIonicProject]@~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/my_mac/Documents/[MyIonicProject]/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/my_mac/Library/Android/sdk:/Users/my_mac/Library/Android/sdk/tools:/Users/my_mac/Library/Android/sdk/platform-tools
10 verbose lifecycle [MyIonicProject]@~build: CWD: /Users/my_mac/Documents/[MyIonicProject]
11 silly lifecycle [MyIonicProject]@~build: Args: [ '-c', 'ionic-app-scripts build' ]
12 silly lifecycle [MyIonicProject]@~build: Returned: code: 1  signal: null
13 info lifecycle [MyIonicProject]@~build: Failed to exec build script
14 verbose stack Error: [MyIonicProject]@ build: `ionic-app-scripts build`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid LpjcaIonic@
16 verbose cwd /Users/my_mac/Documents/[MyIonicProject]
17 verbose Darwin 16.5.0
18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 verbose node v6.9.1
20 verbose npm  v4.5.0
21 error code ELIFECYCLE
22 error errno 1
23 error LpjcaIonic@ build: `ionic-app-scripts build`
23 error Exit status 1
24 error Failed at the [MyIonicProject]@ build script 'ionic-app-scripts build'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the [MyIonicProject] package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     ionic-app-scripts build
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs [MyIonicProject]
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls [MyIonicProject]
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

附加输入到@suraj，类CustomHttpService ，它是位于服务[project]/services/custom-http/custom-http.ts并注入在Providers的部分app.module.ts ：

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, RequestMethod, Request } from '@angular/http';
import { Observable } from 'rxjs/Observable';
// import { Network } from 'ionic-native';
import { Network } from '@ionic-native/network';


@Injectable()
export class CustomHttpService {
    //other code    

    public connection = () => {
        return Network.type;
    }


    public onDisconnect = ():Observable<any> => {
        return Network.onDisconnect();
    }

    public onConnect = ():Observable<any> => {
        return Network.onConnect();
    }   

}

Answer 1

你已经将ionic-native更新为3.x ..但是你的核心ionic-angular仍然是2.0.0-rc0 ，而且所有其他依赖性都比较旧。 目前使用的打字稿更改为2.2。 如果您打算转移到离子本机3，则需要将package.json更新为当前的入门应用程序版本 。

同时检查更改日志 ，了解代码中离子的任何重大更改。

您还需要将每个离子本机插件设置为提供程序并注入构造函数并使用。 检查文档 。 在你的app.module.ts中，

    @NgModule({
  ...

  providers: [
    ...
    Network 
    ...
  ]
  ...
})
export class AppModule { }

在你的custom.http.ts中

constructor(public http:Http,public network:Network
        ){
        console.log("CustomHttpService() starts");
    }
//..other code 


public connection = () => {
        return this.network.type;
    }

Answer 2

遇到相同的错误，在通过代码过滤后，语法错误，缺少逗号。 尝试查看app.module.ts文件。 希望能帮助到你。