Ionic run --prod white screeen

valentinoa · December 15, 2016, 5:23pm

So I can build the app with ionic run android and if I build it with ionic run android --prod it builds without errors and launches okay.
The problem is that when I click anywhere on the app the screen turns white. This does not occur when doing a normal build

Is anyone else having this problem?

Ionic Framework: ^2.0.0-rc.3
Ionic Native: ^2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.1.1
Angular Compiler CLI: 2.1.1
Node: 6.2.2

saintsatplay · December 15, 2016, 5:42pm

Not sure what to recommend here but for what it’s worth here’s what I would try:

Is your Android SDK (and any related dependencies) up to date? Update and double check.
Are there any plugins installed that, if you remove them, stop this from happening?
As a more extreme measure, have you removed the android platform and reinstalled to see if this might clear the problem?

ionic platform rm android
ionic platform add android

And you definitely get no errors during the ionic run android --prod process?

valentinoa · December 16, 2016, 2:30pm

I tried everything and it still has the same problem

valentinoa · December 16, 2016, 6:49pm

I tried everythigng and it doesnt work.
Yeah my android SDKs are completely up to date (25).

Is it possible that the problem is that I am building for Android 23?

I am using ionic-app-scripts 0.0.47.

I think the problem must be with the ionic errors. the screen goes into white/transparent and if I keep on clicking after a while it turns normal again and at the next click it turns white again.

Is there a way to disable the error handling (or is that alraedy done with --prod?)?

mhartington · December 16, 2016, 6:57pm

Can you make sure everything is updated compared to the base starter?

github.com

ionic-team/ionic2-app-base/blob/master/package.json

{
  "name": "ionic-app-base",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",

This file has been truncated. show original

github.com

ionic-team/ionic2-app-base/blob/master/tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"

This file has been truncated. show original

valentinoa · December 16, 2016, 7:02pm

Yes everything is updated.

I tried running with --aot and it works fine so the minification must be the problem

danielsousat · December 16, 2016, 7:11pm

This problem is happening with ionic 2 RC4 too, as I stated on RC4 seems slower to load the app

I still couldn’t make the --prod run on the device without causing the blank screen…

danielsousat · December 17, 2016, 4:00pm

Hello, just to say that I was able to fix this for me.

I just downgraded the typescript version to “2.0.9” (I was using 2.1) and the prod build worked as a breeze. The app loading time is even faster than with RC3.

More details here: RC4 seems slower to load the app

valentinoa · December 17, 2016, 6:55pm

I changed to 2.0.0-rc.4 and I still have the same problem

mhartington · December 19, 2016, 4:52pm

yes please do not use TS2.1.

Ionic and Angular are not setup for TS2.1 yet and it will break everything

ishanambade · January 18, 2017, 5:31am

D:\AraIonicApp>ionic run android --prod

ionic-hello-world@ ionic:build D:\AraIonicApp
ionic-app-scripts build “–prod”

[10:40:28] ionic-app-scripts 1.0.0
[10:40:28] build prod started …
[10:40:29] clean started …
[10:40:29] clean finished in 15 ms
[10:40:29] copy started …
[10:40:29] ngc started …
[10:40:34] build prod failed: Error encountered resolving symbol values statically. Function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function (position 94:19 in the
original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
[10:40:34] ionic-app-script task: “build”
[10:40:34] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider
replacing the function or lambda with a reference to an exported function (position 94:19 in the original
.ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exporte
d function (position 94:19 in the original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
at positionalError (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:595:18)
at simplifyInContext (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:473:27)
at StaticReflector.simplify (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:478:22)
at StaticReflector.annotations (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:60:36)
at NgModuleResolver.resolve (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:14261:46)
at CompileMetadataResolver._loadNgModuleMetadata (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:14646:45)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:14636:23)
at addNgModule (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:12944:43)
at D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:12957:16
at Array.forEach (native)

npm ERR! Windows_NT 6.2.9200
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Users\om\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js” “run” “ionic:build” “–” “–prod”
npm ERR! node v6.9.1
npm ERR! npm v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build "--prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script ‘ionic-app-scripts build “–prod”’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build “–prod”
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\AraIonicApp\npm-debug.log

why am i getting this error

rapropos · January 18, 2017, 5:32am

It would help to see the bit of app.module.ts that is being complained about.

rapropos · January 18, 2017, 5:51am

That is not the app module. That is the app component. The error message is telling you exactly where the problem lies.

ishanambade · January 18, 2017, 6:01am

SO SORRY IN HURRY I UPLOADED COMPONENT FILE… BELOW IS MODULE.TS…ALSO .FEW PAGE IMPORTS NOT COPIED HERE

import { NgModule, ErrorHandler } from ‘@angular/core’;
import { RequestOptions, XHRBackend } from ‘@angular/http’;
import { IonicApp, IonicModule, IonicErrorHandler ,InfiniteScroll} from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
// import { HttpModule} from ‘@angular/http’;

import {Storage} from ‘@ionic/storage’;

import { Focuser } from ‘…/components/focuser/focuser’;

@NgModule({
declarations: [
MyApp,
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Storage, {
provide: HttpInterceptor,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpInterceptor(backend, options);
},
deps: [XHRBackend, RequestOptions]
}]
})
export class AppModule {}

DONT KNOW WHY IT IS THROWING AN ERROR

cristianguedes · March 11, 2017, 4:07pm

I am using TS 2.0.9 here but the problem has not been solved.

mitob · March 13, 2017, 4:09pm

I’m still having the same problem. I have upgraded to ionic 2.2.0 but I still do --prod builds with app-scripts 0.0.46. Everything above results 0.0.46 results in the app not passing the start screen. I tried everything including adding my src to the Ionic 2 Conference app. Same results.

cristianguedes · March 13, 2017, 7:14pm

Can you please post your package.json? I would like to use --prod too.

mitob · March 14, 2017, 9:46am

My package is the same as conference app. I just do “npm install @ionic/app-scripts@0.0.46” and then I can do a production build.

cristianguedes · March 14, 2017, 11:04am

Thank you! I’ll give it a try.

ShyamVashista · March 15, 2017, 7:07am

I am still facing same issue structure is like -
src
-aot
-app
-app.component.html
-app.component.ts
-app.module.ts
-app.routing.ts
-main.ts
-node_modules
-index1.html
-package.json
-systemjs.config.js
-tsconfig-aot.json
-tsconfig.json

D:\Application\Dev\src>“node_modules/.bin/ngc” -p tsconfig-aot.json Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an
exported function (position 39:25 in the original .ts file), resolving symbol AppModule in D:/Application/Dev/src/app/app.module.ts
at positionalError (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:25944:39)
at simplifyInContext (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:25781:31)
at StaticReflector.simplify (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:257
95:17)
at StaticReflector.annotations (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:
25291:64)
at NgModuleResolver.resolve (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:177
71:86)
at CompileMetadataResolver.getNgModuleMetadata (D:\Application\Dev\src\node_modules@angular\compiler\bundles
compiler.umd.js:18272:64)
at addNgModule (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:25053:62)
at D:\Application\Dev\src\node
_modules@angular\compiler\bundles\compiler.umd.js:25064:18
at Array.forEach (native)
at _createNgModules (D:\Application\Dev\src\node_modules@angular\compiler\bundles\compiler.umd.js:25063:30)
Compilation failed