Ionic 2 convert to Ionic 3 : "Error: Failed to transpile program" on "ionic build iOS" - ios

Question

I've been working on setting an existing Ionic 2 project on a Apple Mac machine.
I've duplicated my project as it is described here.
After solving some Xcode issues, finally the app opens on an iPhone iOS physical device but shows a blank screen after the splash screen.
I found how to get some log displayed here. The log input lead me to that SO thread: "cannot find module ionic-native".
I concluded that I had to update my project code to match the new settings to handle ionic-native plugins.
For each plugin I applied the following process: ionic plugin rm [plugin name], ionic plugin add [plugin name], npm install --save #ionic-native/[plugin name].
I reviewed my code to change where needed, in some components and providers from:
{ NativePlugin1, NativePlugin2 } from 'ionic-native';
To:
{ NativePlugin1 } from '#ionic-native/native-plugin-1';
{ NativePlugin2 } from '#ionic-native/native-plugin-2';
I modified my [ionic project folder]/src/app/app.module.ts and added:
// 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 {}
I deleted from my package.json the line "ionic-native": "^2.7.0", as it is suggested in the 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.
Then I launched in that order: sudo npm cache clear, sudo npm install, and finally ionic build ios, for which I get:
"Error: Failed to transpile program"
And above this error I see plenty of errors related to the ionic-native like this one:
[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;
I feel stuck now so if anyone has a hint it would be welcome.
To complete here are some additional info:
ionic info gives:
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
And my package.json is like this:
{
"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": []
}
Some update after #suraj input:
I ve updated my package.json such as:
{
"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": []
}
I followed the change log update for ionic 3.
I deleted the node_modules directory of my project launching:sudo rm -rf node_modules/ then did an nom install , ionic platform rm ios,ionic platform add ios, and finally ionic build ios.
I looked in the log, here is their content:
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 ]
Additional input to #suraj, the class CustomHttpService, it is a service located in [project]/services/custom-http/custom-http.ts and injected in the Providers section of 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

you have updated ionic-native to 3.x.. however your core ionic-angular is still in 2.0.0-rc0 and also all other dependencies are older.
Typescript used currently is changed to 2.2.
You will need to update your package.json to the current starter app version if you plan to move to ionic native 3.
Also check the changelog for any breaking changes in ionic for your code.
Also you need set each of the ionic native plugins as providers and inject in your constructor and use.
Check the docs.
In your app.module.ts,
#NgModule({
...
providers: [
...
Network
...
]
...
})
export class AppModule { }
In your custom.http.ts
constructor(public http:Http,public network:Network
){
console.log("CustomHttpService() starts");
}
//..other code
public connection = () => {
return this.network.type;
}

Answer 2

Ran into the same error and after filtering through the code there was a syntax error with a missing comma. Try looking in your app.module.ts file. Hope it helps.