Angular-cli: AOT build fails

[adwd]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.3
node: 6.11.1
os: darwin x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.3
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

Repro steps.

$ ng new hello
$ cd hello
$ ng build --prod

The log given by the failure.

$ ng build --prod
Hash: edf6fb3ccb1b82fa940c
Time: 10775ms
chunk    {0} polyfills.71b130084c52939ca448.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.e81f19d3f6b27a436c79.bundle.js (main) 1.09 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.f7457d5ac1e9743fd76f.bundle.js (vendor) 849 kB [initial] [rendered]
chunk    {4} inline.18e445e37a0efd4dcfa2.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'hello/src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

Desired functionality.

aot build runs

Mention any other details that might be useful.

Maybe, enhanced-resolve 3.4.0 is cause.
https://github.com/webpack/enhanced-resolve/issues/98

ng build --prod runs successfully after npm i [email protected] .

[mchmielarski]

I noticed same problem and after npm i [email protected] I can build with AOT

[MasDevProject]

Same problem here

[serhiisol]

@mchmielarski That's a very nice guess 👍

[zucker-rdrg]

Same here.
workaround: npm install [email protected]

[jahller]

thanks for the solution guys, this problem just cost us the whole morning.
adding [email protected] solved it.

[ChrisCherryfarmer]

Thx, same here.
[email protected] solved the issue.

[kondi0]

The same here!

[email protected] solved it!

[hpyou]

thanks god for this issue, i fixed this problem the whole day

[thegitty]

Workaround with "[email protected]" seems to work on Mac OS but not on Linux!? Can anyone confirm this behavior?

[sculeb]

works on linux ubuntu 16.04 for me

[TautvydasDerzinskas]

Same issue.

[TautvydasDerzinskas]

Guys, you should really use fixed dependency versions for Angular-Cli. It's been a millionth time when everything breaks because in new versions of sub dependencies there is something unexpected...

[cankayacan]

The angular-cli version is already fixed for us which is 1.3.1 but still we have this error.

[bmcswee]

Same issue for me. Resolved with [email protected] on Ubuntu Server.

RIP the first 2 hours of my morning.

[erashu212]

It worked for me too with 3.3.0.

[amiram]

Still we have error in AOT even with 3.4.1. Also in development the environment.ts is not overwritten with the appropriate environment file

[webmutation]

This breaks all builds, amazing fun was had today! PLZ PLZ PLZ move to fixed dependency.

[tkoenig89]

Issue still exists with[email protected] here. Same issue showing up.
Staying at 3.3.0 for now.

[Pittan]

When creating new project with fresh installed angular/cli 1.2.0 fails, too :(
I used yarn for package management.

[pvanhemmen]

Same problem here. npm install [email protected] resolved the issue for me temporarily, but only when it's installed as an addition into an already up and running project. Deployment through a fresh install with npm install with this dependency set in package.json does not work.

This is a major bug, because it breaks a running deployment pipeline and with it the whole production setup.

[mscherer82]

I'm on windows and adding [email protected] doesn't work for me.

[angelnikolov]

@mscherer82 Did you run npm install? If you did, you can try deleting node_modules and re-running it. It worked for me.

[mscherer82]

@angelnikolov yes, I deleted node_modules and reinstalled all packages.

[angelnikolov]

Hm, can you try running npm ls and see if this is your enhanced-resolve version
+-- [email protected]

[eelokets]

@pvanhemmen
You should install enhanced-resolve after npm install. As temporary resolve it's ok.

[pvanhemmen]

@vicetjs That's what I did and the only way it works for me, too. Thanx for your help!

[benelliott]

In order to make my build server happy I forked angular/ngtools-webpack-builds and pinned enhanced-resolve at 3.3.0, then forked angular/cli-builds to point it at my ngtools fork. If anyone is interested they can try it out by changing their package.json to "@angular/cli": "github:benelliott/cli-builds#24a8837" (note however that both libraries will be at master, not a specific version).

[bmcswee]

@pvanhemmen I was able to get deployment via fresh install working again by using npm shrinkwrap after installing [email protected]. This got my Jenkins build pipeline working fine again

This should also prevent upstream dependency breakage from harming my project in the future :)

[pvanhemmen]

@bmcswee Awesome, thanx for the tip!

[mscherer82]

npm listgave me:

+-- @angular/[email protected]
| +-- @ngtools/[email protected]
| +-- @ngtools/[email protected]
| | +-- [email protected]
...
| +-- [email protected]
...
| | +-- [email protected] deduped
...
+-- [email protected]

[dgetts192]

Installing enhanced-resolve 3.3.0 did the trick thank you!

[kasperfp]

[email protected] did the trick for my project. Can somebody please explain me what this package does?

[jakeNiemiec]

https://github.com/angular/angular-cli/issues/4551 regression from months ago.

[kasperfp]

@jakeNiemiec This means I should uninstall the package at a later point in time, when the Angular team fixes the bug, right?

Cheers!

[andreasonny83]

Guys, the [email protected] way-around doesn't work on my project. I still have the same error. Is there any update on this issue?

[kasperfp]

@andreasonny83 did you run exactly this command:

npm i [email protected]

Make sure to update Angular CLI and Node as well.

[jakeNiemiec]

Just to be clear (@kasperfp, @andreasonny83):
❌ Won't work (this is what npm@^5 put in my package.json when I ran npm i [email protected]):
"enhanced-resolve": "^3.3.0",
✅ Will Work:
"enhanced-resolve": "3.3.0",

See more complete comment by @Gustorn below: https://github.com/angular/angular-cli/issues/7113#issuecomment-317483817

[mydata]

jakeNiemiec comment worked for me too. Is there any fix planned for this breaking change?

[filipesilva]

Hi all,

This seems to be a bug/breaking change in enhanced-resolve, a dependency of webpack. Will try to talk to the Webpack maintainers about this.

Meanwhile pin it to "enhance-resolve": "3.3.0" in your package.json.

Edit: issue on enhanced-resolve is https://github.com/webpack/enhanced-resolve/issues/98.

[benelliott]

@filipesilva Worth noting that it is also a direct dependency of @ngtools/webpack.

[filipesilva]

@benelliott good point.

[warmans]

@lsunkara AFAIK that will result in a non-aot build which might not be desirable for everyone.

[filipesilva]

@warmans is correct. Please see https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds for effect of the --prod flag.

[webmutation]

@bmcswee :+1: I am adding shrinkwrap --dev to all things now. Just takes a bit more discipline, tired of all these breaking changes on npm packages. So that is a great tip to all.

[lsunkara]

@warmans, I agree, ng build --env=prod is not desirable. Pinning to enhanced-resolve to 3.3.0 only works.
Thanks.

[renatop7]

Nothing fixes this error for me.
Already tried everything writen in this thread.

If anybody did something different please let me know!

[Gustorn]

@renatop7 I think some of the workaround suggestions here won't actually save the proper version in your package.json. Here's how I fixed it:

1. Remove every reference to enhanced-resolve from your package.json (if you already have some from other workarounds)
2. Run the command: npm i -DE [email protected] (-DE should work consistently between npm4 and npm5)
3. (Optional) Delete your node_modules folder to verify that it works with a clean install
4. npm install, then run the production build

Edit: Also if you're using npm5 I'd try regenerating package-lock.json (just delete it before step 4). I don't think this applies to too many people, the build shouldn't have even broken if you have a lockfile.

[filipesilva]

@Gustorn's that's a very good step by step guide, thanks!

[warmans]

@gustorn I also had to clear my npm cache to get the right version.

[Gustorn]

@warmans Did you pass the -E flag? The npm cache shouldn't matter if you ask for a specific version of the package (or if it does get it wrong I'd argue it's a bug in npm).

@HirenParekh It's because @ngtools/webpack does not lock lock the version of enhanced-resolve. If you take a look at its package.json file from the 1.1.1 release you'll see that the version is ^3.1.0. npm, on fresh installs, will install the newest, semver-compatible version of the package, which in this case is the breaking 3.4.0 version.

Edit: apparently the second comment I was replying to was deleted. Since the explanation might be useful for someone, the question was basically:

Why doesn't downgrading to @angular/[email protected] solve the issue?

[jakeNiemiec]

@filipesilva Could this be related to the vue-cli AoT issue pointed out by @yyx990803
https://github.com/webpack/enhanced-resolve/commit/03ef8f2b8d25bc976993eade7b1ed9caa2c7d0e1#commitcomment-23261583

Edit: To be clear, fixes for https://github.com/webpack/enhanced-resolve/pull/100 do not fix this issue.

[mchmielarski]

1. npm i
2. npm i [email protected]

[techramesh]

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"

Resolved the issue for me.

[filipesilva]

We've released 1.2.4/1.3.0-rc.1 to fix this issue. Updating should wholly prevent this issue without any other action needed.

A huge thank you to @sokra for quick responses and zeroing into the issue.

[sickelap]

Just tried to build our project with ^1.0.0 which updated to latest 1.2.4 of angular-cli and it fixed the issue.

Thanks guys for a quick turnaround.

[mildfuzz]

@filipesilva using version 1.2.4 on osx, installed with yarn has not worked

[mildfuzz]

and with version 1.3.0-rc.1 I see:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/john/Workspace/tcabs2/ui/src'
resolve './$$_gendir/app/app.module.ngfactory' in '/Users/john/Workspace/tcabs2/ui/src'
  using description file: /Users/john/Workspace/tcabs2/ui/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/john/Workspace/tcabs2/ui/package.json (relative path: ./src)
    using description file: /Users/john/Workspace/tcabs2/ui/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory.js doesn't exist
      as directory
        /Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory doesn't exist
[/Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory]
[/Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory.ts]
[/Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory.js]
[/Users/john/Workspace/tcabs2/ui/src/$$_gendir/app/app.module.ngfactory]
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

[mildfuzz]

version 1.2.4 works with an npm install, not with a yarn install

[filipesilva]

@mildfuzz try removing your yarn.lock, it's probably keeping [email protected] around. On the next yarn, it will be rebuilt.

[mildfuzz]

no darts, I have been purging yarn.lock and node_modules between builds, to ensure that my CI server will work

[mildfuzz]

rm -rf yarn.lock && rm -rf node_modules && yarn install && ng build -prod does not work

rm -rf yarn.lock && rm -rf node_modules && npm i && ng build -prod does work (using npm 5.3.0)

[ryzy]

Same here: Issue was present on rc.0, seems to be present on rc.1 too.

Removing node_modules, yarn.lock + yarn cache clean, and then re-installing everything from the scratch - doesn't resolve the issue ;/

PS: there's a difference in error message. Content is the same, but on rc.0 it was printed without indents, now it's with nice indentation ;-) as pasted by @mildfuzz

[sickelap]

Tried yarn install as well. It seems it installs correct version 3.3.0 but ng build --prod fails.

Not using yarn in our project, tried just out of curiosity.

[Toxicable]

Just tried

npm install -g @angular/cli
ng -v 
 -returns version 1.2.4
npm new aottest
cd aottest
ng build --prod

works without failing
no use of yarn or yarn config just npm

[filipesilva]

@mildfuzz @ryzy what does yarn list enhanced-resolve show you? Also yarn why enhanced-resolve.

[thegitty]

@filipesilva

yarn list v0.27.5
└─ [email protected]
Done in 1.26s.

[filipesilva]

Right, there's definitely something wrong there. We're pinning it to 3.3.0 so yarn shouldn't be installing 3.4.1. Can you run yarn why enhanced-resolve to see why it's resolving to that?

[thegitty]

[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info Reasons this module exists

• "@angular/cli#@ngtools/webpack" depends on it
• "@angular/cli#webpack" depends on it
  info Disk size without dependencies: "196kB"
  info Disk size with unique dependencies: "328kB"
  info Disk size with transitive dependencies: "820kB"
  info Number of shared dependencies: 12
  Done in 1.61s.

[coryrylan]

yarn why enhanced-resolve

Reasons this module exists

• "awesome-typescript-loader" depends on it
• "webpack" depends on it

Our deps

"@angular/cli": "1.3.0-rc.0",
"@angular/compiler-cli": "4.1.3",
"@angular/animations": "4.1.3",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/platform-server": "4.1.3",
"@angular/router": "4.1.3",
"rxjs": "5.4.2",
"zone.js": "0.8.14"

[filipesilva]

@thegitty I think you have a linked @angular/cli somewhere... @angular/cli does not depend on enhanced-resolve directly.

@coryrylan hm, I don't see the CLI or ngtools/webpack there.

[coryrylan]

yarn lock has
ngtools/[email protected]
angular/[email protected]

[mildfuzz]

version 3.4.1

This module exists because "@angular/cli#@ngtools/webpack" depends on it.

[AdonousTech]

Ughh.
Build broke for 2nd time in 2 weeks.
Adding npm install [email protected] solved the problem.

[mildfuzz]

Here is the commit that upgraded webpack

https://github.com/webpack/webpack/commit/16bf0b6f26b23df682433ddefcbff5278a6fac2c

[hccampos]

I think to force yarn to use a certain version you need to add an entry to resolutions in your package.json

[filipesilva]

@coryrylan you need @angular/[email protected] for the fix, but you're in 1.3.0-rc.0.

@mildfuzz that commit does exist but it's not released yet. The last webpack release was 9 days ago, but that commit was 13 hours ago.

I tried copy pasting your package.json and doing yarn, and it seems to install right:

kamik@T460p MINGW64 D:/sandbox/tmp
$ yarn && yarn list enhanced-resolve && yarn why enhanced-resolve
yarn install v0.24.6
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has unmet peer dependency "@ngrx/store@^2.2.1".
warning "@ngrx/[email protected]" has unmet peer dependency "@ngrx/store@^2.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 66.95s.
yarn list v0.24.6
└─ [email protected]
Done in 0.87s.
yarn why v0.24.6
[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info Reasons this module exists
   - "@angular/cli#@ngtools/webpack" depends on it
   - "@angular/cli#webpack" depends on it
Done in 0.89s.

You might be experiencing a bug in yarn. It wouldn't be the first time it has some trouble resolving versions. I was using v0.24.6 myself.

[coryrylan]

@filipesilva ahh thanks! I'll give that a try I should of noticed that

[mildfuzz]

@filipesilva that commit appears to be straight onto master with no semver change

[filipesilva]

Yes, but you are not using master, you are using [email protected]. The only way to get master is if you were using it directly from github, which as per your package.json you are not.

[mildfuzz]

good point. Hmmm, curious

[cebor]

Is there any workaround to use yarn + [email protected]?

[coryrylan]

@cebor I'm in the same situation but haven't found a fix yet.

[rightisleft]

I'm still seeing this fail on my linux env:

$ng -v
@angular/cli: 1.2.4
node: 6.11.1
os: linux x64
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1
[root@4bc7c5f8560c]# yarn list enhanced-resolve
yarn list v0.27.5
├─ [email protected]
└─ [email protected]
└─ [email protected]
Done in 0.62s.

OS X & Linux have version matches for both @angular/cli && enhances resolve. However, running on my alpine docker container i get:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/godata/pipelines/XXX/src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts

The OS X version builds with no issues

[samridh90]

I'm seeing a different, maybe related issue. I upgraded to @angular/[email protected] based on this thread.
When I do an AOT build without the --prod flag, everything is fine. It fixes the webpack loading issue. Though nothing is cache busted or minified (as expected).

$ ng build -aot -bh /app/ -d /app/
 12% building modules 24/26 modules 2 active ...dh/code/skyl-sam/gui/src/polyfills.tsThe final argument to magicString.overwrite(...) should be an options object. See https://github.com/rich-harris/magic-string
Hash: dccdd84edb379b90050e
Time: 18188ms
chunk    {0} common.bundle.js, common.bundle.js.map (common) 225 kB {8} [initial] [rendered]
chunk    {1} 1.chunk.js, 1.chunk.js.map 158 kB {2} {4} [rendered]
chunk    {2} 2.chunk.js, 2.chunk.js.map 22.8 kB {1} {4} [rendered]
chunk    {3} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 305 kB {8} [initial] [rendered]
chunk    {4} main.bundle.js, main.bundle.js.map (main) 206 kB {7} [initial] [rendered]
chunk    {5} styles.bundle.js, styles.bundle.js.map (styles) 12.8 kB {8} [initial] [rendered]
chunk    {6} scripts.bundle.js, scripts.bundle.js.map (scripts) 935 bytes {8} [initial] [rendered]
chunk    {7} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.39 MB [initial] [rendered]

However, an AOT build with --prod errors out in the browser. It tells me that a chunk could not be found.

$ ng build -aot -bh /app/ -d /app/ --prod
 12% building modules 20/22 modules 2 active ...dh/code/skyl-sam/gui/src/polyfills.tsThe final argument to magicString.overwrite(...) should be an options object. See https://github.com/rich-harris/magic-string
Hash: 087aa24978df80ff0791
Time: 31614ms
chunk    {0} common.c748e79cd1f1548103ca.bundle.css (common) 64.2 kB {8} [initial] [rendered]
chunk    {1} 1.25adab460fca740132f8.chunk.js 156 kB {2} {4} [rendered]
chunk    {2} 2.d8720a9ef943f0c023dd.chunk.js 22.8 kB {1} {4} [rendered]
chunk    {3} polyfills.ff68bf59b00f20dd55fa.bundle.js (polyfills) 305 kB {8} [initial] [rendered]
chunk    {4} main.84addcca1f874b2e3beb.bundle.js (main) 204 kB {7} [initial] [rendered]
chunk    {5} scripts.8e25fcd212b7caba6537.bundle.js (scripts) 935 bytes {8} [initial] [rendered]
chunk    {6} styles.5d90f8fb1f36b9f8617d.bundle.css (styles) 69 bytes {8} [initial] [rendered]
chunk    {7} vendor.32a6e9e7149831c7fbfc.bundle.js (vendor) 2.39 MB [initial] [rendered]
chunk    {8} inline.1170c1e8a9ba9c0dfcf5.bundle.js (inline) 0 bytes [entry] [rendered]

Error in the browser

ERROR Error: Uncaught (in promise): Error: Loading chunk 0 failed.
Error: Loading chunk 0 failed.
    at HTMLScriptElement.n (inline.1170c1e….bundle.js:1)
    at HTMLScriptElement.o (polyfills.ff68bf5….bundle.js:1)
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at Object.onInvokeTask (vendor.32a6e9e….bundle.js:1)
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at r.runTask (polyfills.ff68bf5….bundle.js:1)
    at e.invokeTask [as invoke] (polyfills.ff68bf5….bundle.js:1)
    at h (polyfills.ff68bf5….bundle.js:1)
    at HTMLScriptElement.d (polyfills.ff68bf5….bundle.js:1)
    at HTMLScriptElement.n (inline.1170c1e….bundle.js:1)
    at HTMLScriptElement.o (polyfills.ff68bf5….bundle.js:1)
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at Object.onInvokeTask (vendor.32a6e9e….bundle.js:1)
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at r.runTask (polyfills.ff68bf5….bundle.js:1)
    at e.invokeTask [as invoke] (polyfills.ff68bf5….bundle.js:1)
    at h (polyfills.ff68bf5….bundle.js:1)
    at HTMLScriptElement.d (polyfills.ff68bf5….bundle.js:1)
    at a (polyfills.ff68bf5….bundle.js:1)
    at a (polyfills.ff68bf5….bundle.js:1)
    at polyfills.ff68bf5….bundle.js:1
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at Object.onInvokeTask (vendor.32a6e9e….bundle.js:1)
    at t.invokeTask (polyfills.ff68bf5….bundle.js:1)
    at r.runTask (polyfills.ff68bf5….bundle.js:1)
    at o (polyfills.ff68bf5….bundle.js:1)
    at e.invokeTask [as invoke] (polyfills.ff68bf5….bundle.js:1)
    at h (polyfills.ff68bf5….bundle.js:1)
_ @ vendor.32a6e9e….bundle.js:1

So, looks like it was expecting the chunk "0.84a03cc88aee47079f58.chunk.js" to be generated but it was not. Has anyone seen something like this? Would really appreciate any help here. Thanks!

[Chris380]

That issue is really annoying and took me some hours. But npm install [email protected] worked fine for me on windows, no further delete or clean needed.
Thanks for that helpful hint!

[sickelap]

You can update your package.json with @angular/cli ~1.2.0. It will update to latest 1.2.4 and you don't need to hack-install it

[mildfuzz]

@filipesilva so I am not using [email protected]

yarn list webpack shows [email protected], which has "enhanced-resolve": "^3.0.0",, so this would update to 3.4.1 when executed, no?

Even at [email protected] we are not pinned, we have "enhanced-resolve": "^3.3.0",

[ryzy]

@filipesilva

$ yarn list enhanced-resolve
yarn list v0.27.5
├─ @ngtools/[email protected]
│  └─ [email protected]
└─ [email protected]
Done in 0.83s.

$ yarn why enhanced-resolve
yarn why v0.27.5
[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info This module exists because "webpack" depends on it.
info Disk size without dependencies: "196kB"
info Disk size with unique dependencies: "328kB"
info Disk size with transitive dependencies: "848kB"
info Number of shared dependencies: 10
Done in 0.84s.

$ yarn list webpack
yarn list v0.27.5
└─ [email protected]
Done in 0.83s.

My entire package.json here: https://gist.github.com/ryzy/aa422bc587c6858207caa55aa66c82db

[BorntraegerMarc]

Does anybody have a fix for yarn users? I'm still experiencing the error. Even tried to downgrade from @angular/cli": "1.2.4 to @angular/cli": "1.2.3 because there enhanced-resolve seems to have released a fix: https://github.com/webpack/enhanced-resolve/releases/tag/v3.4.1

But I'm still experiencing the error. With ether version.

yarn list enhanced-resolve
yarn list v0.27.5
└─ [email protected]
Done in 1.26s.

yarn why enhanced-resolve
yarn why v0.27.5
[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info This module exists because "@angular/cli#@ngtools/webpack" depends on it.
Done in 2.81s.

[sickelap]

@BorntraegerMarc adding enhanced-resolve locked to 3.3.0 into package.json fixed the issue with yarn

[BorntraegerMarc]

@sickelap I'm not using yarn's flat architecture. It's not possible because of external reasons. Or do you mean something else? And I don't think it's possible to add a single dependency to the resolutions right?

[sickelap]

@BorntraegerMarc for some reason yarn installs enhanced-resolve as root dependency, although it's updated to correct version for webpack dep. So to fix it just add "enhanced-resolve": "3.3.0" into your package.json devDependencies and it should be fixed at least for now.

[BorntraegerMarc]

@sickelap I added "enhanced-resolve": "3.3.0", to the devDependencies and ran yarn cache clean and yarn but I still have the same error. I also deleted the yarn.lock file.

in the yarn.lock file I still see the entry:

enhanced-resolve@^3.0.0:
  version "3.4.1"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
  dependencies:
    graceful-fs "^4.1.2"
    memory-fs "^0.4.0"
    object-assign "^4.0.1"
    tapable "^0.2.7"

[vimalraj9423]

ERROR in Type PropertiesViewComponent in /media/vimal/personal/future/dar-wepapp/src/app/properties-view/properties-view.component.ts is part of the declarations of 2 modules: AppModule in /media/vimal/personal/future/dar-wepapp/src/app/app.module.ts and loginModule in /media/vimal/personal/future/dar-wepapp/src/app/login/login.module.ts! Please consider moving PropertiesViewComponent in /media/vimal/personal/future/dar-wepapp/src/app/properties-view/properties-view.component.ts to a higher module that imports AppModule in /media/vimal/personal/future/dar-wepapp/src/app/app.module.ts and loginModule in /media/vimal/personal/future/dar-wepapp/src/app/login/login.module.ts. You can also create a new NgModule that exports and includes PropertiesViewComponent in /media/vimal/personal/future/dar-wepapp/src/app/properties-view/properties-view.component.ts then import that NgModule in AppModule in /media/vimal/personal/future/dar-wepapp/src/app/app.module.ts and loginModule in /media/vimal/personal/future/dar-wepapp/src/app/login/login.module.ts.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/media/vimal/personal/future/dar-wepapp/src'
@ ./src/main.ts 3:0-74
@ multi ./src/main.ts

[drawcall]

wonderful idea

[filipesilva]

@BorntraegerMarc @mildfuzz I don't know what's wrong with yarn resolutions but I can have a go at it myself. Can you provide me with a package.json that I can tinker with?

@ryzy I tried your package.json and this is what I got:

kamik@T460p MINGW64 D:/sandbox/tmp
$ yarn --version
0.24.6

kamik@T460p MINGW64 D:/sandbox/tmp
$ yarn
yarn install v0.24.6
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 81.84s.

kamik@T460p MINGW64 D:/sandbox/tmp
$ yarn list enhanced-resolve
yarn list v0.24.6
└─ [email protected]
Done in 0.86s.

kamik@T460p MINGW64 D:/sandbox/tmp
$ yarn why enhanced-resolve
yarn why v0.24.6
[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info Reasons this module exists
   - "@angular/cli#@ngtools/webpack" depends on it
   - "@angular/cli#

So atm it seems to me that v0.27.5 doesn't resolve dependencies properly while v0.24.6 does.

[BorntraegerMarc]

@filipesilva thx for the reply. I'm running yarn v0.27.5 so maybe that is the problem...

Here is my package.json:

{
    "name": "x",
    "version": "1.0.0",
    "engine": {
        "node": "0.10.x",
        "npm": "2.1.x"
    },
    "homepage": "komed-health.com",
    "scripts": {
        "build:prod": "ng build --prod"
    },
    "dependencies": {
        "@angular/animations": "4.3.1",
        "@angular/common": "4.3.1",
        "@angular/compiler": "4.3.1",
        "@angular/core": "4.3.1",
        "@angular/forms": "4.3.1",
        "@angular/http": "4.3.1",
        "@angular/platform-browser": "4.3.1",
        "@angular/platform-browser-dynamic": "4.3.1",
        "@angular/platform-server": "4.3.1",
        "@angular/router": "4.3.1",
        "@angular/service-worker": "1.0.0-beta.16",
        "@codebakery/origami": "1.2.3",
        "@types/socket.io-client": "1.4.29",
        "angular-translator": "2.2.0",
        "check-browser": "0.1.7",
        "classlist.js": "1.1.20150312",
        "core-js": "2.4.1",
        "intl": "1.2.5",
        "ngx-auto-unsubscribe": "1.0.0",
        "rollup": "0.45.2",
        "rollup-plugin-commonjs": "8.0.2",
        "rollup-plugin-node-resolve": "3.0.0",
        "rxjs": "5.4.2",
        "tributejs": "2.3.7",
        "zone.js": "0.8.14"
    },
    "devDependencies": {
        "@angular/cli": "1.2.4",
        "@angular/compiler-cli": "4.3.1",
        "@types/jasmine": "2.5.53",
        "browserstack-local": "1.3.0",
        "codelyzer": "3.1.2",
        "cpr": "2.2.0",
        "db-migrate": "0.10.0-beta.21",
        "db-migrate-mongodb": "1.2.2",
        "enhanced-resolve": "3.3.0",
        "jasmine-core": "2.6.4",
        "jasmine-spec-reporter": "4.1.1",
        "karma": "1.7.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "polymer-cli": "1.3.1",
        "protractor": "5.1.2",
        "rimraf": "2.6.1",
        "ts-node": "3.2.1",
        "tslint": "5.5.0",
        "typescript": "2.4.2"
    }
}

[bmcswee]

@BorntraegerMarc perhaps try explicitly specifying "enhanced-resolve": "3.3.0" under dependencies as well as devDependencies

[BorntraegerMarc]

@bmcswee that also didn't work...

[ankeshdave]

@filipesilva
as per your comment on the issue #7125 I am using the latest cli.
- Using latest rc1
- installed [email protected] still the same error.

using yarn it does not works , using npm it works.

yarn why v0.27.5
[1/4] Why do we have the module "enhanced-resolve"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info Has been hoisted to "enhanced-resolve"
info This module exists because it's specified in "devDependencies".
Done in 0.82s.

yarn list v0.27.5
├─ [email protected]
└─ [email protected]
   └─ [email protected]
Done in 0.78s.



md5-5f5afc9e77bd4c2f2ec312c6146b7f7e



ng new my-prj --skip-install --skip-git -dir my-prj --style scss --routing 

No other changes are done in the project excepting adding [email protected]

[ryzy]

@filipesilva indeed, it seems like some yarn issue! I upgraded it to the next version (0.28.4), but the error was still there.

Now, I downgraded yarn to v0.24.6, same as yours, the module resolutions seems to be ok ([email protected]) but the error is still there.

$ node -v
v6.11.0

$ yarn list
yarn list v0.24.6
...
├─ @angular/[email protected]
...
├─ @ngtools/[email protected]
│  ├─ [email protected]
...
├─ [email protected]
...
├─ [email protected]
│  ├─ enhanced-resolve@^3.3.0
...

$ yarn why enhanced-resolve
yarn why v0.24.6
info Reasons this module exists
   - "@angular/cli#@ngtools/webpack" depends on it
   - "@angular/cli#webpack" depends on it

Same package.json as previously.

Fresh install w/o node_modules and yarn.lock with cleared yarn cache.
The AoT build error is still there (see full dump). Weird...

@filipesilva Did you try to actually build it (with AoT), did it work? (as you didn't mention explicitly about build, just about the module resolution).

[BorntraegerMarc]

Could somebody maybe re-open this ticket or should we create a new one specific for yarn?

[kavi87]

Yarn will keep installing the 3.4 version for package that want it (like webpack which uses a ^ in the version number). The only way I managed to fix it was to modify my yarn.lock by manually changing the version and resolved field for the enhanced-resolve ^3.4.0 entry to point to the 3.3.0 instead.

[BorntraegerMarc]

@kavi87 yes, that also worked for me. But it's obviously not a long-term solution :smile:

[stwic]

@BorntraegerMarc Wouldn't the long-term solution be waiting for enhanced-resolve to fix itself?

[BorntraegerMarc]

@stwic it seems like they already published a "fix". But I'm not sure if this really fixes it or is the cause...

[cebor]

@BorntraegerMarc https://github.com/webpack/enhanced-resolve/issues/98#issuecomment-317516344

[BorntraegerMarc]

Thanks a lot @cebor So it seems like we need to wait on a long-term fix from @ngtools/webpack side. The enhanced-resolve lib behaves correctly. When do you guys expect the correct implementation of WebpackCompilerHost in @ngtools/webpack? Maybe it makes more sense to focus on the actual fix then to try to get yarn running with the current setup. I'm quite sure yarn would work again if we would get the newest angular-cli version with the WebpackCompilerHost fix

[samridh90]

@filipesilva: Can you take a look at my earlier comment, https://github.com/angular/angular-cli/issues/7113#issuecomment-317599036, and let me know if it looks like it's related to this issue? If not, I'll open a new issue with a minimal repro.

[BorntraegerMarc]

@samridh90 I don't think it's related. My browser executed my prod build without problems...

[samridh90]

@BorntraegerMarc : Does your app have any lazy loaded routes?

[BorntraegerMarc]

@samridh90 yes

[jpduckwo]

If npm install [email protected] isn't working and you're using webpack, you might also want to try npm install [email protected] too. Lost 3 hours today :(

[BorntraegerMarc]

@filipesilva did you have time to tinker already? :) I opened a but at yarn in the meantime https://github.com/yarnpkg/yarn/issues/4024

[keyiis]

@filipesilva i have same issues,i used @ngtools/webpack,all package update to latest,see below:
"@angular/compiler-cli": "^4.3.1", "@angular/platform-server": "^4.3.1", "@ngtools/webpack": "^1.5.3", "webpack": "^3.4.0", "@angular/common": "^4.3.1", "@angular/compiler": "^4.3.1", "@angular/core": "^4.3.1", "@angular/forms": "^4.3.1", "@angular/http": "^4.3.1", "@angular/platform-browser": "^4.3.1", "@angular/platform-browser-dynamic": "^4.3.1", "@angular/router": "^4.3.1",

[jkuri]

this seems like incopatibility with webpack > 3.3.0 and @ngtools/webpack.

npm install [email protected] [email protected]

resolves the issue.

[cebor]

Yes, @ngtools/webpack and [email protected] breaks build also with npm.

Shouldn't we reopen this issue again? Seems, that for many scenarios this is definitely not fixed.

[MitchTalmadge]

Count me in to those who cannot get it to work with [email protected]. Thanks to @jpduckwo for sacrificing his 3 hours to save mine; downgrading to [email protected] works great.

[d-bechtel]

my quick fix for installing with yarn: pinned enhanced-resolve to "3.3.0" in my package.json and added an "postinstall"-script, which deletes enhanced-resolve in webpack

[play2web]

For now, npm install [email protected] [email protected], will resolve the issues. Txanks

[BorntraegerMarc]

@play2web doesn't get resolved if you are using yarn...

[BorntraegerMarc]

So the official (100% working) workaround for now is to downgrade yarn to version 0.24.6

[ferdis]

@BorntraegerMarc Can you please provide a reference to that being the "official" workaround? AFAIK there is no fix, since there's a dependency conflict between @ngtools/webpack and webpack. @ngtools/webpack likely needs to be updated to fix this issue for yarn users.

[BorntraegerMarc]

OK @uitgewis with "official" I mean it is officially acknowledged (until now) as a bug: https://github.com/yarnpkg/yarn/issues/4024 I don't have anymore info. maybe "official" is a too strong word here 😄 I just know that I had to downgrade to 0.24.6 because nothing else worked

[cebor]

A "official" statement would be awesome if the issue detected by sokra (https://github.com/webpack/enhanced-resolve/issues/98#issuecomment-317516344) is on the roadmap for the next release. Or what is to do, to fix this?

Status quo:

• @ngtools/webpack is not usable as standalone with webpack > 3.3.0
• @angular/cli is not usable with yarn > 0.24.6

[Gustorn]

As much as I hate this workaround, you can technically "fix" the yarn.lock file by hand if downgrading yarn is not an option for you. After upgrading your Angular-related dependencies your lockfile should have something like this:

[email protected]:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz#950964ecc7f0332a42321b673b38dc8ff15535b3"
  dependencies:
    graceful-fs "^4.1.2"
    memory-fs "^0.4.0"
    object-assign "^4.0.1"
    tapable "^0.2.5"

enhanced-resolve@^3.0.0:
  version "3.4.1"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
  dependencies:
    graceful-fs "^4.1.2"
    memory-fs "^0.4.0"
    object-assign "^4.0.1"
    tapable "^0.2.7"

Replace that with:

[email protected], enhanced-resolve@^3.0.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz#950964ecc7f0332a42321b673b38dc8ff15535b3"
  dependencies:
    graceful-fs "^4.1.2"
    memory-fs "^0.4.0"
    object-assign "^4.0.1"
    tapable "^0.2.5"

and you'll be able to build with 0.27.5 again. Please note that as the file itself tells you, one shouldn't edit the yarn.lock file manually but this _should_ work until a more robust fix is found.

[cebor]

@Gustorn does not work for me, every time i run yarn it adds the wrong entry to yarn.lock again.

Here is my repo with the failing build: https://github.com/cebor/ng2-start

[Gustorn]

@cebor, I should've mentioned, this workaround is for plain CLI projects only (or in other words: it solves the yarn issue but _does not_ solve the webpack issue).

Since you have webpack@^3.4.1 as a dependency you cannot fix your lockfile because the new version explicitly depends on enhanced-resolve@^3.4.0. You can only fix this problem by downgrading to [email protected] first.

[krjordan]

@cebor After doing what @Gustorn suggested, running yarn --pure-lockfile should work. Probably want to make sure to delete your node_modules as well.

[jpduckwo]

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'hello/src'

Just as an additional note for people getting the error. It can also be a problem with your code. Please see here for things to check for that will break AOT. Some things will break the build and some will just fail at runtime (from experience)

https://github.com/rangle/angular-2-aot-sandbox

I got especially hit with this yesterday because I ran into this bug AND had one of these problems in my app 😂

[Gustorn]

@krjordan I won't repeat it here, but if you do the edit as I described in #7136 you _shouldn't_ need the --pure-lockfile option.

[filipesilva]

Yarn users: there is a dedicated discussion topic in https://github.com/angular/angular-cli/issues/7136#issuecomment-318313404.

To all users: you should not have webpack in your package.json. Webpack does not work properly with multiple versions installed at the same time. See https://github.com/angular/angular-cli/issues/6417#issuecomment-315708400 for more information.

We'll be updating @ngtools/webpack (as per https://github.com/webpack/enhanced-resolve/issues/98#issuecomment-317518593) but this is not something that will happen on short term as it requires a fair bit of work.

Meanwhile we've pinned [email protected] (https://github.com/angular/angular-cli/pull/7123) and [email protected] (https://github.com/angular/angular-cli/pull/71300). These result in dependencies being properly resolved.

@samridh90 no idea what's happening in your https://github.com/angular/angular-cli/issues/7113#issuecomment-317599036 but seems unrelated. Can you open a new issue please?

[russelltrafford]

@filipesilva so for use with angular-cli projects, is adding [email protected] to our package.json enough, or should we also be tying down to [email protected]?

It seems to be fixed in @angular/[email protected] as per comments from others above, however we are not in a position to upgrade to that right now.

What would be the intermediate fix, is first thing mentioned above good enough?

[michaelsanford]

FYI I'm still getting this error on just-released 1.2.6 even though it bumps enhanced-resolve to 3.4.1 despite rumours it would work.

I saw a suggestion that this may have something to do with npm 5...somehow? (I did remove my package-lock.json before updating.)

👉 EDIT: See this comment below, it's in fact unrelated.

[ghost]

For cli projects

• yarn 0.24.6
• enhanced-resolve@3.3.0

For non-cli projects using @ngtools/webpack

• yarn 0.24.6
• enhanced-resolve@3.3.0
• webpack@3.3.0

[filipesilva]

We got a new fix in yesterday (https://github.com/angular/angular-cli/pull/7169), under 1.2.6/1.3.0-rc.3. We hope that it will allow [email protected] and below to resolve correctly even under yarn.

@russelltrafford it's hard to say and depends on your package manager. If you're on npm, that should be fine. To test, remove package-lock.json/yarn.lock/node_modules, update package.json with [email protected], npm install, ng build --aot. If you get an error about $$gendir, it doesn't work. If you don't, it's working.

@michaelsanford are you using npm or yarn? Can you provide me with your package.json? I can test it myself and see what's happening.

[filipesilva]

Also, when using 1.2.6/1.3.0-rc.3 you shouldn't need to have either enhanced-resolve or webpack in your package.json. It might even break stuff to have webpack in your package.json (https://github.com/angular/angular-cli/issues/7113#issuecomment-318328125).

[jkuri]

@ngtools/[email protected] working fine again 👍

[mmc41]

@filipesilva Happy this is solved but as a related issue, could the meaningless error message be fixed so that similar errors in the future gives ANY useful information? (An error referring to a file the developer can not see is not so user friendly).

[steve-todorov]

Using @ngtools/[email protected] did not solve the issue for me. I had to manually install [email protected] after running npm install and then had to copy/paste node_modules/enhanced-resolve to node_modules/webpack/node_modules/enhanced-resolve for this to work.

[michaelsanford]

@filipesilva But of course! Thank you 😄

I'm running [email protected] and [email protected] on Windows 10 (under a cmdr shell).

My global Angular CLI is 1.2.6, matching that installed in my project:

λ npm ls -g @angular/cli
`-- @angular/[email protected]

Here is my project's package.json:

{
  "name": "prod-test-fail",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.1",
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.6",
    "@angular/compiler-cli": "^4.3.1",
    "@angular/language-service": "^4.3.1",
    "@types/core-js": "^0.9.42",
    "@types/jquery": "^3.2.9",
    "@types/node": "8.0.17",
    "codelyzer": "^3.1.2",
    "ts-node": "~3.3.0",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2"
  }
}

This morning, I deleted node_modules/ folder, the package-lock.json and npm installed the above package with the following results:

Output of ng build:

λ ng build
Hash: 02193d0724fa51e87a0d
Time: 24523ms
chunk    {0} main.bundle.js, main.bundle.js.map (main) 2.24 MB {2} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 174 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.89 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

Output of ng build --prod and ng build --aot:

λ ng build --prod
Hash: adc8c0af1f195a4cd49a
Time: 6075ms
chunk    {0} polyfills.dd983c51be469b02aa15.bundle.js (polyfills) 174 kB {3} [initial] [rendered]
chunk    {1} main.10609bd5e9ef4fd0b393.bundle.js (main) 713 bytes {2} [initial] [rendered]
chunk    {2} vendor.a590f07d547ec4b39908.bundle.js (vendor) 849 kB [initial] [rendered]
chunk    {3} inline.bf6c517a9f6f64c103ca.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in Cannot determine the module for class ModalInstanceComponent in C:/Users/<me>/app/src/ui/src/app/components/modal/modalInstance.ts! Add ModalInstanceComponent to the NgModule to fix it.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './../$$_gendir/src/app.module.ngfactory' in 'C:\Users\<me>\app\src\ui\src'
 @ ./src/main.ts 3:0-77
 @ multi ./src/main.ts

It may be worth noting (should this somehow be the true source of my problem) that this is an angular 2 project born in _beta-6_ which we have progressively kept up to date every 3 weeks as angular has been updated.

I have made rather extensive changes to the the project to allow it to compile with ng. I followed the more-or-less accepted guide of creating a template project with ng new and copying files and library changes in manually.

This explains the outstanding ModalInstanceComponent error: it has no template and is instantiated in another component. If I include it in my main @NgModule, it throws a cascade of new errors, so I have left it as-is for now. I imagine this is (now?) an anti-pattern and will revisit it.

This types issue cropped up at about same time, but may be unrelated. I don't seem to encounter this error now with 0.8.17, but it may encounter the can't resolve $$_gendir error first. I've tried with both .17 and .16.

(And for those who may have cringed, yes, I'm removing jQuery 😉.)

[filipesilva]

@michaelsanford ah, I see now: the first error you get is actually causing the second:

ERROR in Cannot determine the module for class ModalInstanceComponent in C:/Users//app/src/ui/src/app/components/modal/modalInstance.ts! Add ModalInstanceComponent to the NgModule to fix it.

Since that fails, AOT doesn't compile anything really so you get the second error:

Module not found: Error: Can't resolve './../$$_gendir/src/app.module.ngfactory'

Which is true (but hard to interpret).

You have to fix the first error to get right of the second.

[michaelsanford]

@filipesilva I had a strong suspicion that might be the case; thank you _very much_ for looking into it and confirming, we've not tried AOT prior to using ng.

I suspect we still have a lot of AOT-incompatible code. I have a refactoring task to move this template-less @Component to a @Directive (I'm not even sure why it was written this way).

_Update_ for others with a problem like this who still want a _prod_ bundle and who just started using ng, the following emits a functional application package:

ng build --prod --aot=false

[russelltrafford]

Good find @filipesilva !
So does this only affect projects that use modals? Ours only just added our first modal, so is that why we are 'suddenly' experiencing this issue? Having said that, our other app does not use modals, and gets this error too...

[filipesilva]

@russelltrafford not modals per se, but overall components that are not in any NgModule.

[fwchen]

[email protected] not work for me

[naichenardi]

Include this line in package.json "enhanced-resolve": "3.3.0"
run npm install and ng build --prod
Thanks

[fwchen]

Hi everybody, i remove a unused component and it works.
I hope the angular team attached importance to this error, too difficult to locate.

[ThalesMatoso]

When I run ng build --prod, does it complain about private form variables, any solution to this or do I really have to put everything as public?

[tsj1992]

You should make all the members which are accessed from the template, public, instead of private. I think it will solve your issue @ThalesMatoso

[ThalesMatoso]

Cool ... this is going to work, but if you talk about a bigger system, can not you come and get in the way? Really is the only alternative?

[benelliott]

@ThalesMatoso When you reference fields of a component's class in its template, you are really writing instructions for Angular's rendering engine to take those values and display them on the DOM. Since the renderer is separate from and external to the component's class, attempts to access private variables will result in a TypeScript compilation error. Thus any fields in your component's class which might be touched by external services, such as those referenced in your template or annotated with decorators like @ViewChild, must be public.

[bmayen]

Also, just to be clear, this is an Angular feature/requirement. Not specific to CLI.

[studds]

Am I correct in thinking that the npm i [email protected] is not a reliable fix? @angular/[email protected] depends on [email protected] which in turn depends on [email protected]. npm seems fairly determined to make sure that webpack gets what it asks for.

I've tried installing [email protected] and it worked once, but then I ran npm install again and it stopped working. Am I missing something or is it rather difficult to get around this in a stable way?

[filipesilva]

@studds you shouldn't need to add enhanced-resolve manually with the newer versions.

[daniele-pecora]

Installing "enhanced-resolve": "^3.3.0" solved it for me

[joshikeerti]

I have enhanced resolve 3.3.0 and ngtools webpack 1.6.2,
Still seeing errors

Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/ui/package.json (relative path: ./src/app/Components/selector)

"@angular/animations": "^4.3.6",
"@angular/cdk": "2.0.0-beta.8",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/compiler-cli": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.6",
"@ngrx/core": "^1.0.2",
"@ngrx/effects": "^2.0.0",
"@ngrx/store": "^2.1.2",
"@ngtools/webpack": "^1.6.2",
"enhanced-resolve": "^3.3.0",

[cbeaujoin]

Finaly makes it work with devDependencies "@angular/cli": "1.2.6" and dependencies "enhanced-resolve": "3.3.0" and @angular/*:"^4.3.6"

[sukeshthakare]

I am getting this error while creating new angular project.

Installing packages for tooling via npm.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "--quiet" "install"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10

npm ERR! shasum check failed for C:\Users\Sukeshu\AppData\Local\Tempnpm-3120-1165392c\registry.npmjs.org\jasmine-spec-reporter-\jasmine-spec-reporter-4.1.1.tgz
npm ERR! Expected: 5a6d58ab5d61bea7309fbc279239511756b1b588
npm ERR! Actual: 1cca12519560608e42bb4efd78f30d818740a4f9
npm ERR! From: https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.1.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Sukeshu\Desktopng2\dappnpm-debug.log

Package install failed, see above.
Package install failed, see above.

[dyngosz]

"enhanced-resolve": "3.3.0" fixed the issue for me.

[xtianus79]

Just saying... if you are using prod build you should be using shrinkwrap... it's there for you guys to use. Also, yarn.

[xtianus79]

this issue creeped up for me using ngtools/webpack for my angular build... not using angular-cli and I specifically used ngtools/webpack 1.5.3 and the issue resolved itself... with using that other plugin....

So for people using ngtools/webpack simply use at this time version 1.5.3... adding the other package won't do anything no matter what version you use.

[yassinechabli]

upgrading angular/cli to 1.2.4 resolve the problem for me .

[adgang]

Angular apps created with older cli still dont work. To get around it, i just copied a fresh package.json from a new app.
If you want to make existing angular app running, (some package among)the following packages(diff i got while getting my own app running) should be upgraded:

diff seodemo/package.json aotdemo/package.json
2c2
<   "name": "seodemo",
---
>   "name": "aotdemo",
15,23c15,23
<     "@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.4.3",
---
>     "@angular/animations": "^4.2.4",
>     "@angular/common": "^4.2.4",
>     "@angular/compiler": "^4.2.4",
>     "@angular/core": "^4.2.4",
>     "@angular/forms": "^4.2.4",
>     "@angular/http": "^4.2.4",
>     "@angular/platform-browser": "^4.2.4",
>     "@angular/platform-browser-dynamic": "^4.2.4",
>     "@angular/router": "^4.2.4",
25,26c25,26
<     "rxjs": "^5.1.0",
<     "zone.js": "^0.8.4"
---
>     "rxjs": "^5.4.2",
>     "zone.js": "^0.8.14"
29,31c29,31
<     "@angular/cli": "1.2.0",
<     "@angular/compiler-cli": "^4.0.0",
<     "@angular/language-service": "^4.0.0",
---
>     "@angular/cli": "1.4.3",
>     "@angular/compiler-cli": "^4.2.4",
>     "@angular/language-service": "^4.2.4",
35c35
<     "codelyzer": "~3.0.1",
---
>     "codelyzer": "~3.1.1",
45c45
<     "ts-node": "~3.0.4",
---
>     "ts-node": "~3.2.0",

[kernwig]

Should this help someone else:

After reading through this whole thing, I noticed the dependency: "@angular/cli": "1.1.x",

When I allowed that to upgrade, the problem went away.

[bhushangahire]

I am getting the same issue for Angular CLI 1.5.0 I also have Enhanced resolve 3.3.0

[eduibrahim]

Me too. Still getting: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Even after use Angular CLI 1.5.0 and Enhanced resolve 3.3.0

[stefdelec]

Same here. Any Update ?

[manpreetpc]

[email protected] is not work for me
package.json
{
"name": "LENDZ",
"version": "0.0.1",
"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",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/camera": "^4.4.2",
"@ionic-native/core": "4.3.2",
"@ionic-native/diagnostic": "^4.5.2",
"@ionic-native/facebook": "^4.4.2",
"@ionic-native/file": "^4.4.2",
"@ionic-native/file-path": "^4.4.2",
"@ionic-native/geolocation": "^4.4.2",
"@ionic-native/google-maps": "^4.4.2",
"@ionic-native/http": "^4.4.2",
"@ionic-native/native-storage": "^4.4.2",
"@ionic-native/network": "^4.5.2",
"@ionic-native/onesignal": "^4.5.2",
"@ionic-native/push": "^4.4.2",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic-native/stripe": "^4.5.2",
"@ionic-native/transfer": "^3.14.0",
"@ionic/storage": "^2.1.3",
"angular2-moment": "^1.7.0",
"cordova-android": "6.3.0",
"cordova-browser": "~5.0.1",
"cordova-plugin-camera": "^3.0.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-file": "^5.0.0",
"cordova-plugin-file-transfer": "^1.7.0",
"cordova-plugin-filepath": "^1.1.0",
"cordova-plugin-geolocation": "^3.0.0",
"cordova-plugin-googlemaps": "^2.1.1",
"cordova-plugin-inappbrowser": "~1.7.2",
"cordova-plugin-ionic-webview": "^1.1.11",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-network-information": "^1.3.4",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-stripe": "^1.5.3",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-sqlite-storage": "^2.1.2",
"cordova.plugins.diagnostic": "^3.7.2",
"enhanced-resolve": "^3.4.1",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "^1.2.2",
"ionicons": "3.0.0",
"onesignal-cordova-plugin": "^2.2.4",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "^3.1.7",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-facebook4": {
"APP_ID": "xxxxxxxxxxx",
"APP_NAME": "LENDZ"
},
"cordova-plugin-nativestorage": {},
"cordova-sqlite-storage": {},
"cordova-plugin-camera": {},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-filepath": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "xxxxxxxxxxxxxxxxxxxxxx",
"API_KEY_FOR_IOS": "xxxxxxxxxxxxxxxxxxxx"
},
"cordova-plugin-geolocation": {},
"onesignal-cordova-plugin": {},
"cordova.plugins.diagnostic": {},
"cordova-plugin-network-information": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-stripe": {}
},
"platforms": [
"browser",
"android"
]
}
}
Please help

[Sparker73]

As @cbeaujoin well said. If you leave it like this you will build with AOT without troubles.

    @angular/*:"^4.3.6"
    "enhanced-resolve": "3.3.0"
devDependencies
    "@angular/cli": "1.2.6"
    "typescript": "^2.3.4"

I have to add that typescript had to be 2.3.4 for me, and the best of all, the build time was drastically reduced to around 6:35 when before it was taking about 29min to build. I will stay like this for a while.

[jkrajinovic]

[email protected] solved it!

[angular-automatic-lock-bot[bot]]

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._}