angular-cli: AOT build fails

I noticed same problem and after npm i enhanced-resolve@3.3.0 I can build with AOT

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…

@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 enhanced-resolve@3.3.0 (-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.

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.

Same problem here. npm install enhanced-resolve@3.3.0 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.

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.

Enhanced-resolve@3.3.0 did the trick for my project. Can somebody please explain me what this package does?

Same issue for me. Resolved with enhanced-resolve@3.3.0 on Ubuntu Server.

RIP the first 2 hours of my morning.

I’m on windows and adding enhanced-resolve@3.3.0 doesn’t work for me.

Issue still exists with enhanced-resolve@3.4.1 here. Same issue showing up. Staying at 3.3.0 for now.

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

Workaround with “enhanced-resolve@3.3.0” seems to work on Mac OS but not on Linux!? Can anyone confirm this behavior?

@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/<me>/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.

Just to be clear (@kasperfp, @andreasonny83): ❌ Won’t work (this is what npm@^5 put in my package.json when I ran npm i enhanced-resolve@3.3.0): "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

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 enhanced-resolve@3.4.1 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 enhanced-resolve@3.3.0, 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.

@play2web doesn’t get resolved if you are using yarn…

@pvanhemmen I was able to get deployment via fresh install working again by using npm shrinkwrap after installing enhanced-resolve@3.3.0. This got my Jenkins build pipeline working fine again

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

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

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

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

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

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

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

@mchmielarski That’s a very nice guess 👍

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

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.

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

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 enhanced-resolve@3.3.0 (https://github.com/angular/angular-cli/pull/7123) and webpack@3.3.0 (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?

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:

enhanced-resolve@3.3.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"

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:

enhanced-resolve@3.3.0, 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.

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

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

npm install enhanced-resolve@3.3.0 webpack@3.3.0

resolves the issue.

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

Guys, the enhanced-resolve@3.3.0 way-around doesn’t work on my project. I still have the same error. Is there any update on this issue?

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

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

@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.

@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

@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.

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 😂

Count me in to those who cannot get it to work with webpack@3.4.0. Thanks to @jpduckwo for sacrificing his 3 hours to save mine; downgrading to webpack@3.3.0 works great.

Yes, @ngtools/webpack and webpack@3.4.0 breaks build also with npm.

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

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.

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.

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.

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

If anybody did something different please let me know!

@bmcswee 👍 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.

npm listgave me:

+-- @angular/cli@1.2.3
| +-- @ngtools/json-schema@1.1.0
| +-- @ngtools/webpack@1.5.2
| | +-- enhanced-resolve@3.4.1
...
| +-- webpack@2.4.1
...
| | +-- enhanced-resolve@3.4.1 deduped
...
+-- enhanced-resolve@3.3.0

works on linux ubuntu 16.04 for me