Angular-cli: ng build --prod give Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\projectpath\src'

Created on 23 Mar 2017  ·  53Comments  ·  Source: angular/angular-cli 
- [x ] bug report

Versions.

@angular/*": "4.0.0-rc.6

@angular/cli: 1.0.0-rc.4
node: 6.9.1
os: win32 x64
Windows 7 And Window 10

Repro steps.

Just run ng build --prod

The log given by the failure.

dules/@ng-bootstrap/ng-bootstrap/util/util.d.ts
Hash: b8b958c29762fa762c34
Time: 11764ms
chunk    {0} polyfills.62c31de27797344f09a6.bundle.js (polyfills) 158 kB {5} [initial] [rendered]
chunk    {1} main.0080928b6a891ad4f45d.bundle.js (main) 3.21 kB {4} [initial] [rendered]
chunk    {2} styles.4001f4f573259b290c26.bundle.css (styles) 175 bytes {5} [initial] [rendered]
chunk    {3} sw-register.b73048fe3d9f8a1e7ae5.bundle.js (sw-register) 232 bytes {5} [initial] [rendered]
chunk    {4} vendor.87c63162470e632861f4.bundle.js (vendor) 960 kB [initial] [rendered]
chunk    {5} inline.ce192cec606fd32293a6.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in m.replace is not a function

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Users\asahi\ngnode-fullstack\src'
 @ ./src/main.ts 5:0-74
 @ multi ./src/main.ts

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:prod"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:prod: `ng build --prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:prod script 'ng 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 ngnode-fullstack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng build --prod
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ngnode-fullstack
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ngnode-fullstack
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\asahi\ngnode-fullstack\npm-debug.log

Desired functionality.

Should produce production build

picture asadsahi
👍25

Most helpful comment

Solved by #7113

1.npm clean cache

  1. Delete node_modules
  2. Add "enhanced-resolve": "3.3.0" in your package.json
  3. run npm install
    then test the command "ng build --prod"
picture Apee on 24 Jul 2017
👍19 🎉7 👎2

All 53 comments

I'm seeing this as well. Seems like something changed in Angular 4.0.0-rc.6. If you downgrade to rc.5 production builds work again.

yarrgh picture yarrgh on 23 Mar 2017

@chuckjaz just confirmed that this error has been solved on @angular/angular master and will be in Angular 4.0 final.

hansl picture hansl on 24 Mar 2017

Heya, I'm told that this was a bug in Angular 4.0.0-rc.6 and that i's now fixed. I'm sorry but I don't have an issue to link here. It should be out next release.

filipesilva picture filipesilva on 24 Mar 2017

@hansl just tried it out with following package.json:

  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.1",
    "@ngrx/store-devtools": "^3.2.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "ts-helpers": "^1.1.1",
    "typings": "^2.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",

    // some others ...

    "typescript": "~2.2.0"
  }

Still having this issue on ng build --aot

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve 'myproject/src/$$_gendir/app/home/signup/signup.module.ngfactory.ts' in 'myproject/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts
emreavsar picture emreavsar on 24 Mar 2017
👍19 😕2

Slightly different stacktrace, but same error (using ng4):

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/myuser/projects/myapp/src'
 @ ./src/main.ts 5:0-74
 @ multi ./src/main.ts
binarious picture binarious on 24 Mar 2017
👍13

ps: I'm only having this issue when i add the files parameter to tsconfig.app.json file.

emreavsar picture emreavsar on 24 Mar 2017
👍3

Hi guys, Good, news. Its work for me now.
Both builds, jit prod & aot prod are working. there are some errors on 1 - 2 pages when running the aot version, which I suspect something wrong with my code, but I have to dig a little deeper to find out what are those, but cli is building both outputs perfectly this time.

I am on angular 4 and cli 1 final.

asadsahi picture asadsahi on 24 Mar 2017

great, congrats!

but can you tell me what you've changed?

emreavsar picture emreavsar on 24 Mar 2017
😄7

@emreavsar I haven't modiefied config wise in my project to make it work, just angular/cli and angular packages upgraded to 1 and 4 respectively.

If you are using angular cli the default tsconfig.app.json doesn't have files config in it. Just excluding e2e and spec files in exclude settings.

I also uninstalled global angular/cli package and then installed 1.0.0 globally as well.

One thing I haven't tried is doing npm install with yarn. I have rimraf node_modules from my project and then just did npm install.

asadsahi picture asadsahi on 24 Mar 2017

One thing also worth trying to generate a new cli project and quickly compare the settings of your local project with the new one. I have been doing the same since all the last releases of cli and always finding something has changed in config file. e.g final vs last rc, tsconfig.json files are slightly different.

asadsahi picture asadsahi on 24 Mar 2017

@asadsahi yep did that, i'm working with angular cli 1.0, and angular 4.0 and once i add the files to tsconfig.app.json i cannot build with ng build --aot.

i did the same in a brand new project and it's the same.

emreavsar picture emreavsar on 24 Mar 2017
👍2

A brand new cli project's aot build succeeded on my machine as well.

image

I am on window 7 with node 6.10.0. So I am guessing something different environment wise perhaps?

asadsahi picture asadsahi on 24 Mar 2017

with the files in tsconfig.app.json ?

emreavsar picture emreavsar on 24 Mar 2017

nope, default cli doesn't have files config in tsconfig.app.json. BTW do you need to specify files in config files?

asadsahi picture asadsahi on 24 Mar 2017

Without it works as well for me, after adding files it does not work.

I have local (non npm) typings, which i need in my project:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "files": [
    "../typings/index.d.ts"
  ]
}
emreavsar picture emreavsar on 24 Mar 2017

can you try adding your custom typings in src/typings.d.ts file (default d.ts file generated by cli)?

asadsahi picture asadsahi on 24 Mar 2017

@emreavsar you have the files in the wrong spot in the tsconfig.app.json file. It needs to be inside the compilerOptions object. Putting it outside produces the error that you're seeing.

yarrgh picture yarrgh on 24 Mar 2017

Valid configuration would look like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "files": [
      "../typings/index.d.ts"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
yarrgh picture yarrgh on 24 Mar 2017

@yarrgh wrong belief :). Not inside compiler options. Schema isn't validated. filesis available as root element.

asadsahi picture asadsahi on 24 Mar 2017

True, but try placing it inside and see if ng build --aot works. I'm using files as well. If i place it outside, that error appears. I put it in compilerOptions it compiles. May be a bug?

yarrgh picture yarrgh on 24 Mar 2017

Ill try it out at home.

emreavsar picture emreavsar on 24 Mar 2017

@yarrgh the reason why it might be compiling is because it is ignoring those files at all. If it is working it might well be a typescript bug unless I am missing something.

asadsahi picture asadsahi on 24 Mar 2017

Yeah it is really strange. Doubling it up to where it is both inside and outside of compilerOptions works as well. It seems like the compiler doesn't like it unless it is at least inside the compilerOptions

Works: (only inside compilerOptions)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "files": [
      "../typings/index.d.ts"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Works: (both inside and outside compilerOptions)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "files": [
      "../typings/index.d.ts"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "files": [
    "../typings/index.d.ts"
  ]
}

Doesn't work: (only outside compilerOptions)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "files": [
    "../typings/index.d.ts"
  ]
}
yarrgh picture yarrgh on 24 Mar 2017

When putting it inside, it works.

but then the compiler cannot find the namespaces declared in the typings file...

emreavsar picture emreavsar on 24 Mar 2017
👍1

@emreavsar when you add the files array, you're telling TS that those are the entry points for your project - and only those!

Instead, try using the include property.

filipesilva picture filipesilva on 24 Mar 2017
👍2

Jep also read about that in the meanwhile, but it does not change anything, same result.

emreavsar picture emreavsar on 24 Mar 2017

@emreavsar can you open a new issue with a simple repro please? That way we can investigate.

filipesilva picture filipesilva on 26 Mar 2017

@asadsahi I'm facing the errors but I'm lazy loading modules. It seems it can't find the modules I'm trying to lazy loading. This is my routes setup:

app-routing.ts

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    // path: '*/p-:ssin',
    matcher: pdpURLMatcher,
    loadChildren: './+pdp#PDPModule'
  },
  {
    // path: '*/p-:ssin/bundle',
    path: 'bundle',
    // matcher: pdpTypeURLMatcher,
    loadChildren: './+pdp/+bundle#BundleModule'
  },
  {
    // path: '*/p-:ssin/collection',
    path: 'collection',
    // matcher: pdpTypeURLMatcher,
    loadChildren: './+pdp/+collection#CollectionModule'
  },
  {
    // path: '*/p-:ssin/single-product',
    path: 'single-product',
    // matcher: pdpTypeURLMatcher,
    loadChildren: './+pdp/+single-product#SingleProductModule'
  },

ng build --prod errors:

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/Users/spate42/Projects/NewHorizon/src/$$_gendir/app/+pdp/index.ngfactory.ts' in '/Users/spate42/Projects/NewHorizon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/Users/spate42/Projects/NewHorizon/src/$$_gendir/app/+pdp/+bundle/index.ngfactory.ts' in '/Users/spate42/Projects/NewHorizon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/Users/spate42/Projects/NewHorizon/src/$$_gendir/app/+pdp/+collection/index.ngfactory.ts' in '/Users/spate42/Projects/NewHorizon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/Users/spate42/Projects/NewHorizon/src/$$_gendir/app/+pdp/+single-product/index.ngfactory.ts' in '/Users/spate42/Projects/NewHorizon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

package.json:

"dependencies": {
    "@angular-redux/router": "^6.0.1",
    "@angular-redux/store": "^6.0.1",
    "@angular/animations": "^4.0.0-rc.6",
    "@angular/common": "^4.0.0-rc.6",
    "@angular/compiler": "^4.0.0-rc.6",
    "@angular/compiler-cli": "^4.0.0-rc.6",
    "@angular/core": "^4.0.0-rc.6",
    "@angular/forms": "^4.0.0-rc.6",
    "@angular/http": "^4.0.0-rc.6",
    "@angular/platform-browser": "^4.0.0-rc.6",
    "@angular/platform-browser-dynamic": "^4.0.0-rc.6",
    "@angular/platform-server": "^4.0.0-rc.6",
    "@angular/router": "^4.0.0-rc.6",
    "core-js": "^2.4.1",
    "redux": "^3.6.0",
    "rxjs": "^5.1.0",
    "typescript": "^2.2.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0-rc.6",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0",
    "zone.js": "^0.7.8"
  }

Is there anything special I have to do to get aot working?

sunnypatel picture sunnypatel on 4 Apr 2017
👍3

I got similar Error both in angualr 2 and angular 4

ERROR in Unexpected value 'null' declared by the module 'PageModule in /Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/src/app/pages/routing.module.ts'

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts

RockNHawk picture RockNHawk on 14 Apr 2017
👎1

ng build --prod --aot=false executes without problems.

Or can use
ng build --env=prod
Instead of
ng build --prod

Follow https://github.com/angular/angular-cli/issues/4551

daffodilsunil picture daffodilsunil on 25 Apr 2017
👎14 👍7 😄4 😕1

Strange this issue is closed. I still have the issue with angular cli 1.0.1 (tried with 1.0.0 as well) and angular 4.0.1 (tried with 4.0.0 as well).

1) angular & npm version: 

C:\temp>ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.1
node: 7.8.0
os: win32 x64

2) generate new project

C:\temp>ng new aot-test
installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'aot-test' successfully created.

3) build for prod

C:\temp>cd aot-test

C:\temp\aot-test>ng build --prod
Hash: 95aff9eb24de9bebcc2e
Time: 14385ms
chunk    {0} polyfills.8f58b700e5aa67ecaabd.bundle.js (polyfills) 166 kB {3} [initial] [rendered]
chunk    {1}  (styles) 57.2 kB {3} [initial] [rendered]
chunk    {2} main.eeb8e498ed00c02e4256.bundle.js (main) 806 kB [initial] [rendered]
chunk    {3} inline.0e758da7bdb7782b8654.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in e:/temp/aot-test/src/main.ts
Module not found: Error: Can't resolve './C:/temp/aot-test/src/$$_gendir/app/app.module.ngfactory' in 'e:\temp\aot-test\src'
 @ e:/temp/aot-test/src/main.ts 4:0-95
 @ multi ./src/main.ts

4) just build with --aot option produces same result

C:\temp\aot-test>ng build --aot
Hash: 97b1fefbef9efc6dfe40
Time: 8204ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 57.3 kB {3} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 806 kB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in e:/temp/aot-test/src/main.ts
Module not found: Error: Can't resolve './C:/temp/aot-test/src/$$_gendir/app/app.module.ngfactory' in 'e:\temp\aot-test\src'
 @ e:/temp/aot-test/src/main.ts 4:0-95
 @ multi ./src/main.ts

5) build for prod without aot produces even more errors

C:\temp\aot-test>ng build --prod --aot=false
Hash: 7ae0881e2a218dbe00e6
Time: 23575ms
chunk    {0} polyfills.8f58b700e5aa67ecaabd.bundle.js (polyfills) 166 kB {3} [initial] [rendered]
chunk    {1}  (styles) 57.2 kB {3} [initial] [rendered]
chunk    {2} main.954ab31011b7607af7a5.bundle.js (main) 2.15 MB [initial] [rendered]
chunk    {3} inline.1646bf119902eca70e4b.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in   TypeError: Cannot read property 'match' of undefined

  - suppress-entry-chunks-webpack-plugin.js:40 filterFn
    [aot-test]/[@angular]/cli/plugins/suppress-entry-chunks-webpack-plugin.js:40:91

  - Array.filter

  - suppress-entry-chunks-webpack-plugin.js:42 Compilation.compilation.plugin
    [aot-test]/[@angular]/cli/plugins/suppress-entry-chunks-webpack-plugin.js:42:59

  - Tapable.js:208 Compilation.applyPluginsAsyncWaterfall
    [aot-test]/[tapable]/lib/Tapable.js:208:13

  - util.js:16 Compilation.tryCatcher
    [aot-test]/[bluebird]/js/release/util.js:16:23


  - index.js:642
    [aot-test]/[html-webpack-plugin]/index.js:642:12

  - index.js:152
    [aot-test]/[html-webpack-plugin]/index.js:152:16

  - util.js:16 tryCatcher
    [aot-test]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [aot-test]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [aot-test]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [aot-test]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [aot-test]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [aot-test]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [aot-test]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [aot-test]/[bluebird]/js/release/async.js:17:14

6) build with --env=prod works, but this is probably not what you want to deploy to production...

C:\temp\aot-test>ng build --env=prod
Hash: 7e625e26338135d76fee
Time: 21628ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 57.3 kB {3} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 2.15 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

Any suggestions would be highly appreciated!

wpraet picture wpraet on 27 Apr 2017

Ok, so I figured out what's wrong.
On my windows machine, the c:\temp folder is linked to e:\temp (using junction: https://technet.microsoft.com/en-us/sysinternals/bb896768.aspx)

C:\>dir /x
 Volume in drive C has no label.
 Volume Serial Number is 7E77-1C98

 Directory of C:\

...
09/03/2016  13:48    <JUNCTION>                  temp [\??\e:\temp]
...

The errors says:

Module not found: Error: Can't resolve './C:/temp/aot-test/src/$$_gendir/app/app.module.ngfactory' in 'e:\temp\aot-test\src'

When building directly in the e:\temp folder, it works fine:

E:\TEMP\aot-test>ng build --prod
Hash: 4151ffe069ccfe6726cb
Time: 17420ms
chunk    {0} polyfills.a826c616902ba35dd8ef.bundle.js (polyfills) 166 kB {4} [initial] [rendered]
chunk    {1} main.8e177c429e72a28744b4.bundle.js (main) 21.2 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.8b1206c372ceef779894.bundle.js (vendor) 1.1 MB [initial] [rendered]
chunk    {4} inline.a467aea5b4249c999b26.bundle.js (inline) 0 bytes [entry] [rendered]
wpraet picture wpraet on 27 Apr 2017

make sure your app running with the same cli version that you have created the app, that's the problem what I met.

turnerguo picture turnerguo on 23 May 2017
👍2

Any update on this guys ?

wnabil picture wnabil on 29 May 2017

Happens to me when loadChildren is in node_modules. So if the module is installed via npm.

It will look in the wrong directory:

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/.../
src/node_modules/..../index.ngfactory.ts' in '/home/.../src/$$_gendir'

notice /src/node_modules/

cedvdb picture cedvdb on 20 Jun 2017

Just leaving it here.
Solved by https://github.com/angular/angular-cli/issues/7113

Nodarii picture Nodarii on 24 Jul 2017
🎉1

Solved by #7113

1.npm clean cache

  1. Delete node_modules
  2. Add "enhanced-resolve": "3.3.0" in your package.json
  3. run npm install
    then test the command "ng build --prod"
Apee picture Apee on 24 Jul 2017
👍19 🎉7 👎2

for me not work with target (ng build --prod), but working with: ng build --environment prod

diejsel picture diejsel on 26 Jul 2017
👍3 😄2

@Apee any idea why this approach works and why this happened? Thanks for the fix!

brian-singer picture brian-singer on 27 Jul 2017

@brian-singer I have not idea, my guess is that they updated ng-tools but i'm really not sure what happenned too... If someone has the complete explanation i'd be very happy to know what caused this.

Apee picture Apee on 27 Jul 2017

--env=prod and --prod are not the same thing. See https://github.com/angular/angular-cli/issues/7113#issuecomment-317472732 for some information about that.

filipesilva picture filipesilva on 28 Jul 2017
👍2

I am using lazy loading in my application and getting same error while creating production build.
I was doing
ng build --prod (giving error)

but once I tried
ng build --environment prod (it's working properly)

gyanstack picture gyanstack on 12 Aug 2017
👍4 ❤2

I have been recieiving the following after i tried to lazy load my modules for a project of mine:

ERROR in ./src/$$_gendir lazy
Module not found: Error: Can't resolve ' src\$$_gendirapp\products\product.module.ngfactory.ts' in ' src\$$_gendir'
resolve ' src\$$_gendirapp\products\product.module.ngfactory.ts' in ' src\$$_gendir'
using description file: package.json (relative path: ./src/$$_gendir)
Field 'browser' doesn't contain a valid alias configuration
after using description file: package.json (relative path: ./src/$$_gendir)
using description file: package.json (relative path: ./src/$$_gendir/app/products/product.module.ngfactory.ts)
no extension
Field 'browser' doesn't contain a valid alias configuration
src\$$_gendirapp\products\product.module.ngfactory.ts doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
src\$$_gendirapp\products\product.module.ngfactory.ts.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
src\$$_gendirapp\products\product.module.ngfactory.ts.js doesn't exist
as directory
src\$$_gendirapp\products\product.module.ngfactory.ts doesn't exist
[ src\$$_gendirapp\products\product.module.ngfactory.ts]
[ src\$$_gendirapp\products\product.module.ngfactory.ts.ts]
[ src\$$_gendirapp\products\product.module.ngfactory.ts.js]
[ src\$$_gendirapp\products\product.module.ngfactory.ts]
@ ./src/$$_gendir lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi ./src/main.ts

and i tried all of the different approaches, even changing the enhanced-resolve package.. Nothing worked.. but one thing I noticed was that I actually had my "product" module within a Product folder (with capital P). When I changed the folder naming to lowercase.. my two modules that gave the above error started to compile in --prod mode..

I don't know if this will help anyone but it sure fixed my issues with angular cli AOT / prod

eikc picture eikc on 22 Aug 2017
👍1

@Eikc Exactly the same issue, seems it's become pretty common...
angular 4.2.4 + angular/cli 1.3.2 + typescript 2.4.2

I have been recieiving the following after i tried to lazy load my modules for a project of mine:

ERROR in ./src/$$_gendir lazy
Module not found: Error: Can't resolve ' src$$_gendirapp\products\product.module.ngfactory.ts' in ' src$$_gendir'
resolve ' src$$_gendirapp\products\product.module.ngfactory.ts' in ' src$$_gendir'
using description file: package.json (relative path: ./src/$$_gendir)
Field 'browser' doesn't contain a valid alias configuration
after using description file: package.json (relative path: ./src/$$_gendir)
using description file: package.json (relative path: ./src/$$_gendir/app/products/product.module.ngfactory.ts)
no extension
Field 'browser' doesn't contain a valid alias configuration
src$$_gendirapp\products\product.module.ngfactory.ts doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
src$$_gendirapp\products\product.module.ngfactory.ts.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
src$$_gendirapp\products\product.module.ngfactory.ts.js doesn't exist
as directory
src$$_gendirapp\products\product.module.ngfactory.ts doesn't exist
[ src$$_gendirapp\products\product.module.ngfactory.ts]
[ src$$_gendirapp\products\product.module.ngfactory.ts.ts]
[ src$$_gendirapp\products\product.module.ngfactory.ts.js]
[ src$$_gendirapp\products\product.module.ngfactory.ts]
@ ./src/$$_gendir lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi ./src/main.ts

and i tried all of the different approaches, even changing the enhanced-resolve package.. Nothing worked.. but one thing I noticed was that I actually had my "product" module within a Product folder (with capital P). When I changed the folder naming to lowercase.. my two modules that gave the above error started to compile in --prod mode..

I don't know if this will help anyone but it sure fixed my issues with angular cli AOT / prod

pbuhrmann picture pbuhrmann on 26 Aug 2017
👍1

use @angular/[email protected] solved my problem!

finalxcode picture finalxcode on 7 Nov 2017
👍2 👎1

please try this command "npm i [email protected]"

nirmalk31 picture nirmalk31 on 15 Nov 2017
🎉1

The command "npm i [email protected]" solved my problem!!! Thanks

JhonnyHRocha picture JhonnyHRocha on 31 Jan 2018

I had the same problem and found out what the problem was.

In my feature module (say TestModule), I had a barrel (index.ts exporting the TestModule.
From the app-routing.module.ts I configures lazy loading: loadChildren: ./test#TestModule.
Here I got the same error as mentioned above.

When importing the module from the module file, the error does not occur anymore.
I changed the lazy loading part to: ./test/test.module#TestModule

This solved the problem for me ;-)

elgervb picture elgervb on 29 Mar 2018

I meed the same trouble when i ran ng build --prod, in my project.
To resolve this error, i had tried these 3 kinds of methods, but all failed:

1.Upgrade @anglar/ to version 4.4.7.
2.Upgrade both @angular/cli --save-dev and -g to version 1.2.7.
3.I also tried installing [email protected]，but failed. Current version is 4.1.3.

Now,i totally have no idea, and really hope someone could give me some advices.Thanks!

**Here is my angular info：

@angular/cli:1.2.7

node:7.0.0 os: win32 x64
@angular/animations: 4.4.7 @angular/common: 4.4.7 @angular/compiler: 4.4.7 @angular/core: 4.4.7 @angular/forms: 4.4.7 @angular/http: 4.4.7 @angular/platform-browser: 4.4.7 @angular/platform-browser-dynamic: 4.4.7 @angular/router: 4.4.7 @angular/cli: 1.2.7 @angular/compiler-cli: 4.4.7 @angular/language-service: 4.4.7

错误信息：

ERROR in ./src/$$_gendir async Module not found: Error: Can't resolve 'D:a\frameangular2\demoag127\src\$$_gendirapp\pages\basic\productMngaddProductModuleaddProduct.module.ngfactory.ts' in 'D:a\frameangular2\demoag127\src\$$_gendir' @ ./src/$$_gendir async @ ./~/@angular/core/@angular/core.es5.js @ ./src/main.ts @ multi ./src/main.ts

Garynan52000 picture Garynan52000 on 2 May 2018

And here is my **package.json**:

{
"name": "ag127",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-prod": "node --max_old_space_size=5048 \"./node_modules/@angular/cli/bin/ng\" build --prod"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.2.7",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
"@ngx-translate/core": "6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"ag-grid": "^12.0.2",
"ag-grid-angular": "^12.0.0",
"ag-grid-enterprise": "^12.0.2",
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"angular2-cookie": "^1.2.6",
"angular2-datatable": "0.6.0",
"animate.css": "3.5.2",
"bootstrap": "4.0.0-alpha.6",
"bootstrap-table": "^1.11.2",
"chart.js": "1.1.1",
"chartist": "0.10.1",
"chartist-plugin-barlabels": "0.0.5",
"chartist-plugin-pointlabels": "0.0.5",
"chroma-js": "1.3.3",
"ckeditor": "4.6.2",
"codelyzer": "~3.0.1",
"easy-pie-chart": "2.1.7",
"enhanced-resolve": "^3.3.0",
"font-awesome": "4.7.0",
"fullcalendar": "3.3.1",
"gh-pages": "0.12.0",
"google-maps": "3.2.1",
"heimdalljs-logger": "^0.1.9",
"ionicons": "2.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"leaflet": "0.7.7",
"leaflet-map": "0.2.1",
"lodash": "4.17.4",
"ng2-auto-complete": "^0.12.0",
"ng2-ckeditor": "1.1.6",
"ng2-completer": "1.3.1",
"ng2-handsontable": "0.48.0",
"ng2-pagination": "^2.0.2",
"ng2-slim-loading-bar": "4.0.0",
"ng2-smart-table": "1.0.3",
"ng2-tree": "2.0.0-alpha.5",
"ng2-uploader": "^2.0.0",
"ng2-validation": "^4.2.0",
"ng2-validation-manager": "^0.3.4",
"ngx-bootstrap": "^1.8.1",
"ngx-cookie": "^1.0.0",
"ngx-uploader": "2.2.5",
"node-sass": "^4.9.0",
"normalize.css": "6.0.0",
"npm-run-all": "4.0.2",
"primeng": "^4.1.2",
"protractor": "~5.1.2",
"rimraf": "2.6.1",
"roboto-fontface": "0.7.0",
"standard-changelog": "1.0.1",
"stylelint": "7.10.1",
"tether": "^1.4.0",
"ts-md5": "^1.2.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"tslint-eslint-rules": "4.0.0",
"tslint-language-service": "0.9.6",
"typescript": "~2.3.3",
"typogr": "0.6.6",
"underscore": "1.8.3",
"wintersmith": "2.2.5",
"wintersmith-sassy": "1.1.0"
}
}

Garynan52000 picture Garynan52000 on 2 May 2018

@filipesilva

Garynan52000 picture Garynan52000 on 2 May 2018

@gyanstack solution is working but is this correct?

pptyasar picture pptyasar on 10 Jul 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  ·  3Comments
hareeshav picture hareeshav  ·  3Comments
naveedahmed1 picture naveedahmed1  ·  3Comments
5amfung picture 5amfung  ·  3Comments
sysmat picture sysmat  ·  3Comments