Ionic 2 convert to Ionic 3 : "Error: Failed to transpile program" on "ionic build iOS"
Ionic 2 convert to Ionic 3 : "Error: Failed to transpile program" on "ionic build iOS"
我一直致力于在 Apple Mac 机器上设置现有的 Ionic 2 项目。
我已经按照描述复制了我的项目here。
解决了一些 Xcode 问题后，应用终于在 iPhone iOS 物理设备上打开，但在初始屏幕后显示空白屏幕。
我找到了如何显示一些日志 here. The log input lead me to that 。
我得出结论，我必须更新我的项目代码以匹配 new settings to handle ionic-native plugins。
对于每个插件，我应用了以下过程：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';
我修改了我的 [ionic 项目文件夹]/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", 行，因为它在 solution of the SO thread I am referencing to:
中被建议
You need to remove "ionic-native": "^3.5.0" from your package.json and after that run npm i.
然后我按顺序启动：sudo npm cache clear、sudo npm install，最后是 ionic build ios，为此我得到：
"Error: Failed to transpile program"
在这个错误之上，我看到很多与 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": []
}
我关注了change log update for ionic 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 的附加输入，class CustomHttpService，它是位于 [project]/services/custom-http/custom-http.ts 的服务，并注入 app.module.ts 的 Providers 部分:
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();
}
}
您已将 ionic-native 更新为 3.x.. 但是您的核心 ionic-angular 仍在 2.0.0-rc0 并且所有其他依赖项都较旧。
当前使用的 Typescript 已更改为 2.2。
如果您打算迁移到 ionic native 3，则需要将 package.json 更新为当前的 starter app version。
同时检查 changelog 是否对您的代码进行了 ionic 的任何重大更改。
您还需要将每个 ionic 本机插件设置为提供程序并注入您的构造函数并使用。
检查 the docs。
在你的 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;
}
运行 进入相同的错误，并且在通过代码过滤后存在缺少逗号的语法错误。尝试查看您的 app.module.ts 文件。希望对你有帮助。
我一直致力于在 Apple Mac 机器上设置现有的 Ionic 2 项目。
我已经按照描述复制了我的项目here。
解决了一些 Xcode 问题后，应用终于在 iPhone iOS 物理设备上打开，但在初始屏幕后显示空白屏幕。
我找到了如何显示一些日志 here. The log input lead me to that
我得出结论，我必须更新我的项目代码以匹配 new settings to handle ionic-native plugins。
对于每个插件，我应用了以下过程：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';
我修改了我的 [ionic 项目文件夹]/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", 行，因为它在 solution of the SO thread I am referencing to:
You need to remove "ionic-native": "^3.5.0" from your package.json and after that run npm i.
然后我按顺序启动：sudo npm cache clear、sudo npm install，最后是 ionic build ios，为此我得到：
"Error: Failed to transpile program"
在这个错误之上，我看到很多与 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": []
}
我关注了change log update for ionic 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 的附加输入，class CustomHttpService，它是位于 [project]/services/custom-http/custom-http.ts 的服务，并注入 app.module.ts 的 Providers 部分:
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();
}
}
您已将 ionic-native 更新为 3.x.. 但是您的核心 ionic-angular 仍在 2.0.0-rc0 并且所有其他依赖项都较旧。
当前使用的 Typescript 已更改为 2.2。
如果您打算迁移到 ionic native 3，则需要将 package.json 更新为当前的 starter app version。
同时检查 changelog 是否对您的代码进行了 ionic 的任何重大更改。
您还需要将每个 ionic 本机插件设置为提供程序并注入您的构造函数并使用。 检查 the docs。 在你的 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;
}
运行 进入相同的错误，并且在通过代码过滤后存在缺少逗号的语法错误。尝试查看您的 app.module.ts 文件。希望对你有帮助。