Error when executing an ionic 2 Android app on prod mode

We are having this error when executing and ionic2 app using the --prod flag

image

And the screen gets white after the splashscreen load.

The command we are launching is : ionic run android --prod

We are using a device to the deployment, a Nexus 5x (the same behaviour with emulators)

ionic info:

apache cordova 6.4.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.5.0
Xcode version: Not installed

Cordova plugins:

image

Those are our dependencies on package.json:

“dependencies”: {
@angular/common”: “2.1.1”,
@angular/compiler”: “2.1.1”,
@angular/compiler-cli”: “2.1.1”,
@angular/core”: “2.1.1”,
@angular/forms”: “2.1.1”,
@angular/http”: “2.1.1”,
@angular/platform-browser”: “2.1.1”,
@angular/platform-browser-dynamic”: “2.1.1”,
@angular/platform-server”: “2.1.1”,
@ionic/storage”: “1.1.6”,
“angular2-google-maps”: “0.16.0”,
“ionic-angular”: “2.1.0”,
“ionic-native”: “2.5.1”,
“ionicons”: “3.0.0”,
“localforage”: “1.4.3”,
“localforage-cordovasqlitedriver”: “1.5.0”,
“rxjs”: “5.0.0-beta.12”,
“saml2-js”: “1.11.0”,
“tslint”: “4.0.0”,
“zone.js”: “0.6.26”
}

The bootstrap of the app (main.ts) is done in the standar way :

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);

And our devDependencies:

“devDependencies”: {
@ionic/app-scripts”: “^1.2.2”,
@types/jasmine”: “2.5.38”,
@types/node”: “7.0.4”,
“angular-cli”: “1.0.0-beta.21”,
“codelyzer”: “2.0.0-beta.1”,
“electron”: “1.4.12”,
“electron-builder”: “11.2.3”,
“electron-packager”: “8.5.0”,
“jasmine-core”: “2.5.2”,
“karma”: “1.3.0”,
“karma-chrome-launcher”: “2.0.0”,
“karma-cli”: “1.0.1”,
“karma-jasmine”: “1.0.2”,
“karma-mocha-reporter”: “2.2.1”,
“karma-remap-istanbul”: “0.2.1”,
“sw-toolbox”: “3.5.1”,
“typescript”: “^2.0.9”
}

tsconfig.json

{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“declaration”: false,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“lib”: [
“dom”,
“es6”
],
“module”: “es2015”,
“moduleResolution”: “node”,
“sourceMap”: true,
“target”: “es5”,
“baseUrl”: “.”,
“paths”: {
@app/": [ "src/” ]
},
“types”: [ “node” ]
},
“include”: [
“src/**/*.ts”
],
“exclude”: [
“node_modules”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
}
}

As you can see, we have updated ionic-script to the latests , just to check if the problem has solved, but with no luck.

With the same stack and the 1.2.0 version of ionic-scripts, seems that the ngfactory files are generated, but we have another error (at runtime):

We saw on github an issue regarding this error, but the bug was fixed recommending to update to the 1.2.1 version, and again appeared the error of “Cannot find module …ngfactory”

Any idea of why aren’t the ngfactory files being generated inside the bundle with those versions?
Any help should be appreciated, as this is the latests step to put an awesome and very complete app in production, to reduce the load time at the beggining.
Thanks in advance for your inestimable help.

Regards

We have found the problem. Has been solved just doing a couple of things:

  1. Update package.json with these dependencies:

    “dependencies”: {
    "@angular/common": “2.4.8”,
    "@angular/compiler": “2.4.8”,
    "@angular/compiler-cli": “2.4.8”,
    "@angular/core": “2.4.8”,
    "@angular/forms": “2.4.8”,
    "@angular/http": “2.4.8”,
    "@angular/platform-browser": “2.4.8”,
    "@angular/platform-browser-dynamic": “2.4.8”,
    "@angular/platform-server": “2.4.8”,
    "@ionic/storage": “1.1.6”,
    “ionic-angular”: “2.3.0”,
    “ionic-native”: “2.5.1”,
    “ionicons”: “3.0.0”,
    “localforage”: “1.4.3”,
    “localforage-cordovasqlitedriver”: “1.5.0”,
    “angular2-google-maps”: “0.16.0”,
    “saml2-js”: “1.11.0”,
    “rxjs”: “5.0.1”,
    “sw-toolbox”: “3.4.0”,
    “zone.js”: “0.7.2”
    },
    “devDependencies”: {
    "@ionic/app-scripts": “1.2.2”,
    “typescript”: “2.0.9”,
    “tslint”: “4.0.0”
    },

  2. Removing this configuration we had on package.json:

    “config”: {
    “ionic_bundler”: “webpack”,
    “ionic_source_map_type”: “#inline-source-map
    }

By default ionic 2 uses webpack, so was redundant.
The only problem is that removing this line:

"ionic_source_map_type": "#inline-source-map"

we can’t debug using typescript directly on the browser, but we will generate different config based on the environment.

The good news are that our app runs on Android Nexus 5X in only 3 seconds instead of 12 , the javascript bundle is reduced from 14Mb to 2Mb, so it’s worth it! Thanks ionic 2 guys for that awesome framework and those awesome scripts. The application performs very well on a medium-class mobile device, so for us it’s close to native, and only developed in 3 months for ios (not tested yet) and android, we are very happy with the result.

Hope this post will help somebody

Have a Good day!