Ionic-app-scripts: Uncaught Error: Cannot find module "./app.module.ngfactory"

Created on 15 Dec 2016 · 31Comments · Source: ionic-team/ionic-app-scripts

Short description of the problem:

When running ionic run android --prod The app starts on the device but the browser console on the device gives: 'Uncaught Error: Cannot find module "./app.module.ngfactory"'

What behavior are you expecting?

A working app

Steps to reproduce:

Connect device via usb
run ionic run android --prod
3.

Which @ionic/app-scripts version are you using?
0.47

Source

basvdijk

All 31 comments

@basvdijk,

We need more info or a repo that shows this issue. I cannot recreate it. What OS are you using, etc. What version of the ionic CLI, etc.

Thanks,
Dan

danbucholtz on 15 Dec 2016

Sorry forgot to add:

Your system information:

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v7.2.0
Xcode version: Xcode 8.1 Build version 8B62

Could it be possible that I missed a step while upgrading to 0.47? I've removed the .tmp folder

I cannot give you access to our repo, but you can ask anything which I will try to answer. On 0.46 there was no problem.

As stated on github I removed main.dev.ts and main.prod.ts and created the main.ts with:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

basvdijk on 15 Dec 2016

This seems to be exact issue that is listed at #553

jayeshanandani on 15 Dec 2016

Can you try npm run ionic:build --aot and see if that works? Then just open the index.html file in Chrome or something.

Can you also update typescript in package.json to ensure it is 2.0.9? TypeScript 2.1 is the new default but it doesn't work with Angular AoT yet.

I think minification may be breaking something. Please let me know how it goes.

Thanks,
Dan

danbucholtz on 15 Dec 2016

@danbucholtz I test it and nothing happened and the result was still no ng.factory.module.

brianwang on 15 Dec 2016

is it possible typescript version or ngc config problem?

brianwang on 15 Dec 2016

Can you change your package.json to install @ionic/app-scripts@nightly, blow away node_modules, and run an npm install? I think Webpack RC introduced this issue. It seems to affect the Angular CLI as well.

Thanks,
Dan

danbucholtz on 15 Dec 2016

Posted in the wrong thread I saw...

Thanks for reaching out!

I've added "@ionic/app-scripts": "nightly", to my package.json
Removed .tmp
Removed platforms/android/build
Ran ionic run android --prod

Still the same error: Uncaught Error: Cannot find module "./app.module.ngfactory" at Object. (main.js:7) at e (main.js:1) at main.js:1 at main.js:1

When I open the package.json from node_modules/webpack I see:

{
  "_args": [
    [
      {
        "raw": "webpack@^2.1.0-beta.27",
        "scope": null,
        "escapedName": "webpack",
        "name": "webpack",
        "rawSpec": "^2.1.0-beta.27",
        "spec": ">=2.1.0-beta.27 <3.0.0",

So I guess it is beta27

basvdijk on 15 Dec 2016

When I set typescript back to 2.0.9 and run npm run ionic:build --aot or ionic run ios --prod I get:

> ionic-app-scripts build

[23:40:51]  ionic-app-scripts 0.0.47-201612152207
[23:40:51]  build dev started ...
[23:40:51]  clean started ...
[23:40:51]  clean finished in 1 ms
[23:40:52]  copy started ...
[23:40:52]  ngc started ...
[23:40:55]  build dev 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, resolving symbol
            AppModule in ionic-app/src/app/app.module.ts, resolving symbol
            AppModule in ionic-app/src/app/app.module.ts
[23:40:55]  ionic-app-script task: "build"
[23:40:55]  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, resolving symbol AppModule in
            ionic-app/src/app/app.module.ts, resolving symbol AppModule in
            ionic-app/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 exported function, resolving symbol AppModule in ionic-app/src/app/app.module.ts, resolving symbol AppModule in ionic-app/src/app/app.module.ts
    at simplifyInContext (ionic-app/node_modules/@angular/compiler-cli/src/static_reflector.js:472:23)
    at StaticReflector.simplify (ionic-app/node_modules/@angular/compiler-cli/src/static_reflector.js:475:22)
    at StaticReflector.annotations (ionic-app/node_modules/@angular/compiler-cli/src/static_reflector.js:61:36)
    at _loop_1 (ionic-app/node_modules/@angular/compiler-cli/src/codegen.js:66:54)
    at CodeGeneratorModuleCollector.readFileMetadata (ionic-app/node_modules/@angular/compiler-cli/src/codegen.js:79:13)
    at ionic-app/node_modules/@angular/compiler-cli/src/codegen.js:41:74
    at Array.map (native)
    at CodeGeneratorModuleCollector.getModuleSymbols (ionic-app/node_modules/@angular/compiler-cli/src/codegen.js:41:35)
    at CodeGenerator.codegen (ionic-app/node_modules/@angular/compiler-cli/src/codegen.js:120:39)
    at ionic-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:51:34

basvdijk on 15 Dec 2016

ionic run ios --prod has no issues with nightly version of app-scripts with typescript 2.0.9 and ionic 2.0.rc4

jayeshanandani on 16 Dec 2016

I can confirm this doesn't work with the android device using the latest nightly build and to add Device ready is fired after 20 seconds leading app to crash. Same works after reverting back to 0.0.45 version for android.

jayeshanandani on 16 Dec 2016

@jayeshanandani that is a very bad news...

brianwang on 16 Dec 2016

In addition while running ionic run android --prod it throws the error of the ngfactory files not found. Don't know whether I am doing something wrong as earlier the ngfactory files were auto generated and I think prod version also uses AOT by default.

In ios there are no errors thrown and it works perfectly fine. Don't know what is going wrong in android build.

jayeshanandani on 16 Dec 2016

👍1

i am getting the following error as well when i run ionic run android --aot the error is displayed when i do chrome://inspect and in the emulator the app is just blank, white screen.

 Uncaught Error: Cannot find module "./app.module.ngfactory"

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.4-201612161746
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.2
Node Version: v6.6.0
Xcode version: Not installed

kodeine on 17 Dec 2016

After lots of trial and error with this package.json I've got it compiling again:

{
  "name": "app",
  "description": "MyApp",
  "author": App",
  "homepage": "app.com",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "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.15.0",
    "angular2-moment": "^1.0.0-beta.5",
    "font-awesome": "^4.6.3",
    "ionic-angular": "^2.0.0-rc.4",
    "ionic-native": "2.2.9",
    "ionicons": "3.0.0",
    "ng2-cordova-oauth": "^0.0.6",
    "ng2-translate": "^3.1.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "latest",
    "typescript": "2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ]
}

The problem was caused by angular2-maps (https://github.com/SebastianM/angular2-google-maps). This line in my app.module.ts throws the Error encountered resolving symbol values statically error

AgmCoreModule.forRoot({
       apiKey: 'my-api-key'
})

I have no clue what possibly could be the problem since this is an object and not a function.

basvdijk on 18 Dec 2016

👍1

@basvdijk : did 2.1.1 version of angular worked? As the ionic team mentioned in the upgrade to RC4 to upgrade all packages to 2.2.1. If 2.1.1 works well I would definitely love to work with latest app-scripts as they are super fast for build.

jayeshanandani on 18 Dec 2016

2.1.1 worked, I literally use the package.json mentioned above. Where did you read about upgrading to 2.2.1?

basvdijk on 18 Dec 2016

@basvdijk : https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#200-rc4-2016-12-15

see the package.json in Changelog that is mentioned.

jayeshanandani on 18 Dec 2016

Hi all,

This is resolved in 0.0.48 which was just published.

Please let me know if you have any issues.

Thanks,
Dan

danbucholtz on 19 Dec 2016

@danbucholtz still getting

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, resolving symbol
            AppModule

On the Angular2-maps as described in my previous comment. Any thoughts on this one?

basvdijk on 19 Dec 2016

Seems like it is not app-scripts issue rather its a 3rd party library issue: https://github.com/angular/angular/issues/11262#issuecomment-255177878

jayeshanandani on 19 Dec 2016

Yeah, but it worked in 0.46 and RC3, then I upgraded to 0.47 and it broke. Unfortunately this happens almost every upgrade to another ionic / build scripts version. So I thought there might be a relation between the app script and my issue.

basvdijk on 19 Dec 2016

@basvdijk,

There is a good chance it's not related to ionic or app-scripts at all. It could very well be the 3rd party lib is not using the latest version of ngc and there was a hidden breaking change in there. I'm not sure. If you remove the 3rd party lib does the app work?

Thanks,
Dan

danbucholtz on 19 Dec 2016

Then it works, but did the ngc version used changed from 0.46 to 0.47?

basvdijk on 19 Dec 2016

@basvdijk,

Yes and no. It did not with 0.0.47 but it did with Ionic RC4.

Thanks,
Dan

danbucholtz on 19 Dec 2016

Ok thank so far!

basvdijk on 19 Dec 2016

I don't really understand how the ngc could be broken on an upgrade? Is there any way to debug this, so I would at least have an idea of what library is making it crash or another starting point?

This is what I'm currently running on:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.6
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

Anyone has an idea for this?

BramDecuypere on 27 Jan 2017

@BramDecuypere,

It could be any number of things, but any Angular specific libs that provide templates/providers/etc need to include ngc metadata. What's going on with your app? Are you on Angular 2.2.1?

Thanks,
Dan

danbucholtz on 27 Jan 2017

For me, reverting to [email protected] from @2.1.6 did the trick.

ErvalhouS on 9 Feb 2017

I too am having this issue as mentioned at https://forum.ionicframework.com/t/how-to-diagnose-white-screen-on-startup-on-android-device/79387/7

pjc2007 on 19 Feb 2017

Today solved this issue (without going back to TS 2.0) by changing my deps to

"dependencies": {
    "@angular/common": "2.4.9",
    "@angular/compiler": "2.4.9",
    "@angular/compiler-cli": "2.4.9",
    "@angular/core": "2.4.9",
    "@angular/forms": "2.4.9",
    "@angular/http": "2.4.9",
    "@angular/platform-browser": "2.4.9",
    "@angular/platform-browser-dynamic": "2.4.9",
    "@angular/platform-server": "2.4.9",
    "@ionic/storage": "1.1.9",
    "ionic-angular": "2.1.0",
    "ionic-native": "2.7.0",
    "ionicons": "3.0.0",
    "rxjs": "5.2.0",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "nightly",
    "typescript": "2.2.1"
  }

Because mentioned here: https://github.com/angular/angular/pull/13294
the issue is related to ngc (<2.4) and TS (>2.1)