angular: Can't resolve './app.module.ngfactory'

it was working fine but after updating to 5.0.0 from angular 4.4.4 .it is giving issue.if i get back back to 4.4.4 it is working fine

I’m submitting a…


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

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

Expected behavior

work smoothly. with angular 4.4.4 it is working fine

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


cli packages: (E:\Working Project\test\PiderWeb\node_modules)

    @ionic/cli-utils  : 1.17.0
    ionic (Ionic CLI) : 3.17.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.9.0
    npm               : 5.5.1
    OS                : Windows 10
Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 19
  • Comments: 35 (8 by maintainers)

Most upvoted comments

I also have the same issue, but I’m not using ionic here, only angular and my components. After a lot of try and error I seem to have found out the problem … at least for me. When I created a component, but did not declare it in any module, then I get this error when I run

ng build --aot

Without the --aot option everything runs fine. When I exclude the file from compilation in tsconfig.app.json then the aot-build also works again. It seems that we have to be careful about not used components in our sources.

+26
awallat on Dec 8, 2017

Also facing this issue.

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

May as @vdsabev said when build with --prod or --aot:

Angular v5.1.0 was hiding the real errors

It works for me:

  1. downgrade back to v5.0.5 by replace ^5.0.0 to 5.0.5 in package.json
  2. yarn install
  3. now ng serve --aot would show you the REAL errors
  4. revise ‘package.json’ back and yarn install
+8
cbingrui on Dec 13, 2017

Try run this command

$ ./node_modules/.bin/ngc

It will show the detail error part in your code, it saved my life trying to find what was causing the error. May this can help you.

+7
komorebi42 on Mar 9, 2018

I also had the same issue but solved it by checking my imports:

import { Component } from '@angular/core';

It turns out that Visual Code adds imports like this when you haven’t typed out the import statement manually before:

import { Component } from '@angular/core/src/metadata/directives';

While this works for a JIT build, it will throw off the AOT compiler.

+6
sqwk on Dec 8, 2017

I think I found the source of problem. When I create a pipe, component… under app/test/ folder but not import it to a ngmodule, the error will occur as described above. When I downgrade to 5.0.5, it will show the error that ERROR in Error: Cannot determine the module for class… I have to manually add exclude: […, “app/test/**/*”] to tsconfig.app.json, then upgrade to 5.1.0 and the error has gone.

+4
sandangel on Dec 9, 2017

In my case, Angular v5.1.0 was hiding the real errors. Reinstalling v5.1.0 didn’t fix the issue, but once I downgraded back to v5.0.3, module errors started to pop up and I was able to fix them one by one.

+3
vdsabev on Dec 9, 2017

Error: ./src/app/main.ts Module not found: Error: Can’t resolve ‘./app.module.ngfactory’ The same issue here. How to check why AOT compilation fails? How to see details?

UPDATE: I found how to debug: 1 step: Check with .\node_modules.bin\ngc (windows) or ./node_modules/.bin/ngc (linux) 2 step: If the first step doesn’t help: Try to rollback Angular 5 to 5.0.1-beta.2 - SHOWS AOT FAIL DETAILS Thanks to @Sky4CE https://github.com/angular/angular/issues/20781

+3
Andrey-Pavlov on Dec 8, 2017

Upgrading to angular 5.2.0 gives a more clear message :

ERROR in : Cannot determine the module for class UserProfileActivitiesComponent in /home/me/Documents/dev/projects/deepan/deepan-parent/deepan-front/src/gui/src/app/modules/account/views/profile/services/activities/user-profile-activities.component.ts! Add UserProfileActivitiesComponent to the NgModule to fix it.

So you have to be sure that all your components are imported in a ngModule ou excluded is tsconfig file.

+2
RadouaneRoufid on Aug 8, 2019

Had the same issue because of --aot flag: Fix: ionic app-scripts 3.1.5 -> downgraded to 3.1.2 fixed it.

Figured it out because of @mburger81 answer.

+2
TheSegfault on Dec 13, 2017

Hello! Please add minimal reproduction otherwise this issue will be closed

+2
alexzuza on Nov 9, 2017

I have fix this problem by update Angular and @angular/cli to latest.

+1
yy7054wyq5 on Mar 14, 2018

Having an incorrect casing in your path would also cause issues on CI pipelines, if they happen to run on Linux, which has a case-sensitive file system unlike macOS or Windows.

+1
tlaak on Jan 13, 2018

Please make sure all paths match exactly! Angular 5+ is case-sensitive for paths!

It took me 6 hours last night to track down this issue in Angular 5 aot build.

Here’s the bad code: import { ProgramTitlesMassChangeDialogComponent } from './containers/programTitles/program-titles-mass-change.dialog.component';

Here’s the good code: import { ProgramTitlesMassChangeDialogComponent } from './containers/programtitles/program-titles-mass-change.dialog.component';

That capital "T"in “programtitles” was the whole problem!

Only error message in Angular 5 aot build was

Can’t resolve ‘./app.module.ngfactory’

Discussion on this thread definitely helped, so thanks to all here. It was necessary to downgrade to earlier Angular version to get a meaningful error message that pointed me to the problem component.

+1
FirstVertex on Jan 12, 2018

I have face the same issue i have resolve it by removing module.ts from pages folder in ionic which is created repeatly through ionic g command. and it was conflict b/w app.module.ts and module.ts in pages folder

I hope it will solve your issue

+1
himanshukk81 on Nov 22, 2017

See this issue https://github.com/ionic-team/ionic-app-scripts/issues/1309#event-1339466985 and upgrade to ionic app-scripts 3.1.2

+1
mburger81 on Nov 13, 2017
Read more comments on GitHub
← angular: Can't resolve all parameters for .... This will become an error in Angular v6.x
angular: Can't resolve *.ngfactory.js on AOT serve after update to Angular 6.1 →