Issue #1309 Can't resolve './app.module.ngfactory' is still present for many of us

[mburger81]

Short description of the problem:

As described several days ago in post #1309 the bug is still present for many of us, we did many posts there also I created a repo to reproduce the scenario. Perhaps it is better I create a new one because the other one is closed, so this is what I have wrote there:

On my linux machine It's really simple to simulate the bug which for me still persists.
I created an empty ionic project with ionic start selecting the blank starter template.

After that I remove the Home component from app.module.ts, this component is not loaded and the build script should give error

I created a repo to help you:
https://github.com/mburger81/ionic-ng5-bug

On running./node_modules/.bin/ngc I get this error
Error: Cannot determine the module for class HomePage in ~/ionic-ng5-bug/src/pages/home/home.ts! Add HomePage to the NgModule to fix it.

On running ionic cordova build android --prod --release I get always the same error

Error: ./src/app/main.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '~/ionic-ng5-bug/src/app'
resolve './app.module.ngfactory' in '~/ionic-ng5-bug/src/app'
  using description file: ~/ionic-ng5-bug/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: ~/ionic-ng5-bug/package.json (relative path: ./src/app)
    using description file: ~/ionic-ng5-bug/package.json (relative path: ./src/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        ~/ionic-ng5-bug/src/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        ~/ionic-ng5-bug/src/app/app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        ~/ionic-ng5-bug/src/app/app.module.ngfactory.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        ~/ionic-ng5-bug/src/app/app.module.ngfactory.json doesn't exist
      as directory
        ~/ionic-ng5-bug/src/app/app.module.ngfactory doesn't exist
[~/ionic-ng5-bug/src/app/app.module.ngfactory]
[~/ionic-ng5-bug/src/app/app.module.ngfactory.ts]
[~/ionic-ng5-bug/src/app/app.module.ngfactory.js]
[~/ionic-ng5-bug/src/app/app.module.ngfactory.json]
[~/ionic-ng5-bug/src/app/app.module.ngfactory]
 @ ./src/app/main.ts 2:0-60
    at BuildError.Error (native)
    at new BuildError (~/ionic-ng5-bug/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (~/ionic-ng5-bug/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
    at emitRecords.err (~/ionic-ng5-bug/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (~/ionic-ng5-bug/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (~/ionic-ng5-bug/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (~/ionic-ng5-bug/node_modules/webpack/lib/Compiler.js:368:12)
    at next (~/ionic-ng5-bug/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (~/ionic-ng5-bug/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (~/ionic-ng5-bug/node_modules/tapable/lib/Tapable.js:222:13)

This is my environment:

cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:
    cordova (Cordova CLI) : 7.1.0 

local packages:
    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    Node              : v6.11.5
    npm               : 5.5.1 
    OS                : Linux 4.13

Environment Variables:
    ANDROID_HOME : ~/android/sdk

Misc:
    backend : legacy

Edit:
I updated also to latest Node LTS version 8.9.1 with the same result

[chrisvanderkooi]

Error: Cannot determine the module for class HomePage in ~/ionic-ng5-bug/src/pages/home/home.ts! Add HomePage to the NgModule to fix it.

@mburger81 -- This error literally tells you the issue. You need to add the HomePage class (src/pages/home.ts) to the src/app/app.module.ts in the declarations and entryComponents arrays.

This is because in ng5, all components @Component() needs to be added to a module in order to build.

Your app.module.ts will then look like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

[mburger81]

@chrisvanderkooi thx but are you kidding me?
first: I don't need help to create the app.module.ts!!! I have done this example to reproduce the issue!!! So it is my intention there is no HomePage component loaded on no module!!
second: the error you have seen in my post is NOT the error from app scripts / ionic but from NGC!!!!!!

So sorry, thx for your intention to help, but your post is completly wrong! Thx 👍

Bug is still there and meantime there is another open bug! #1317

[lucastelnovo]

+1

I'm dealing with the same problem. I've been stucked for a week with this and still can't find a solution.

Everything works ok when I run
ionic cordova run android

but when I run
ionic cordova run android --prod

i get the following error:
Error: ./src/app/main.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app'
resolve './app.module.ngfactory' in '/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app'
using description file: /Users/lucastelnovo/Desarrollo/unipool-client-prod/package.json (relative path: ./src/app)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/lucastelnovo/Desarrollo/unipool-client-prod/package.json (relative path: ./src/app)
using description file: /Users/lucastelnovo/Desarrollo/unipool-client-prod/package.json (relative path: ./src/app/app.module.ngfactory)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.json doesn't exist
as directory
/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory doesn't exist
[/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory]
[/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.ts]
[/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.js]
[/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory.json]
[/Users/lucastelnovo/Desarrollo/unipool-client-prod/src/app/app.module.ngfactory]
@ ./src/app/main.ts 2:0-60
at new BuildError (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules//dist/util/errors.js:16:28)
at callback (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules//dist/webpack.js:121:28)
at emitRecords.err (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/lucastelnovo/Desarrollo/unipool-client-prod/node_modules/webpack/lib/Compiler.js:365:9)

What i found strange is that I started a new ionic app with
ionic start myApp _blank
and I could run it in production environment.

However, when I started a new app with the "super" template, without doing any modification in the code, I got the same error output when trying to run with --prod flag.

Does anyone know how can I overcome this?

Thanks in advance
Lucas

[flakolefluk]

@lucastelnovo Take a look at this
ionic-team/starters#20
it has been merged now. i guess it could be your issue with "super" template

[danbucholtz]

This is fixed in 3.1.4.

Thanks,
Dan