Monday, 24 April 2017

Ionic 2 : "Error: Failed to transpile program" on "ionic build iOS"

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": []
}



via nyluje

No comments:

Post a Comment