Angular 2 app doesn't build with last version (v3.4.0)

[H--o-l]

Since last release I can't build my Angular4 app anymore, following error occurs:

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

Had to revert to v3.3.0.

Nb: I use angular/cli v1.0.0-rc.2

[ollilinde]

Exactly same issue here

[jessenic]

Yup, same issue here. Took some time to find the cause!

[jrec15]

Glad we found this, same issue here

[filipesilva]

Hi there,

I'm one of the maintainers of @angular/cli. It seems the recent 3.4.0 breaks @ngtools/webpack, which is at the core @angular/cli (angular/angular-cli#7113).

In the https://github.com/webpack/enhanced-resolve/releases/tag/v3.4.0 release I only see performance changes so am not too sure what changed that breaks our stuff.

Our direct usage of enhanced-resolve is contained in https://github.com/angular/angular-cli/blob/master/packages/@ngtools/webpack/src/paths-plugin.ts.

Is there anything that comes to mind we need to change to support ^3.4.0?

Thanks for your time.

[sokra]

Could you run webpack with --display-error-details resp. stats.errorDetails: true?

A repro case would be great.

[sokra]

nevermind I can use the repro case from the angular issue

[filipesilva]

@sokra I'll get you a isolated webpack config that exhibits this error.

[sokra]

That would be great. Seem to be related to the AOT virtual filesystem thing...

[filipesilva]

Here it is:

git clone https://github.com/filipesilva/ngtools-bug
cd ngtools-bug
npm run webpack # this will show errors
npm i [email protected]
npm run webpack # this will show no errors

[filipesilva]

I agree, it's related to the virtual filesystem indeed. I can't contact it's author right now but can try to figure it out myself if you have any idea of what changed that we should incorporate.

[sokra]

Thanks. I'll look into it.

[chandransuresh]

Same issue here. Need to revert to 3.3.0 to fix the issue.

[sokra]

bisect says 03ef8f2

[jakeNiemiec]

👍 It's not said enough: Thank you to both Filipe and Tobias for your quick responses. This issue is only 8 hours old and already we have Webpack and Angular-CLI core members providing good insight.

[filipesilva]

I'm away from the workstation so can't look into the commit further, but will in a few hours. Thanks for narrowing it down @sokra 👍

[sokra]

ok I found the issue.

https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/compiler_host.ts#L161-L177

The WebpackCompilerHost accesses fs._statStorage.data[path] assuming that fs is a CachedFileSystem from enhanced-resolve.

Instead of creating a virtual filesystem by decorating the filesystem instance WebpackCompilerHost injects data into the private cache of the filesystem. That's not ok.

It's broken now, because data changed from object to Map. I won't fix this on enhanced-resolve side. This need to be fixed in the WebpackCompilerHost class.

Instead of injecting the values, hook into the Compiler environment hook and decorate the filesystem:

const vfs = new VirtualFileSystemDecorator(compiler.inputFileSystem);
compiler.inputFileSystem = vfs;

...

vfs.set("/some/path", ...);

The VirtualFileSystemDecorator redirects all calls to the underlying fs, except overwritten ones.

[sokra]

If you want watching to work consider the same for Compiler.watchFileSystem...

[filipesilva]

@sokra roger, we'll move in that direction. That's likely to fix other issues we were having. For now we're pinning [email protected] in @ngtools/webpack and putting out an emergency release.

Thank you so much for looking into this. 💯

[sokra]

Sounds good

[ollilinde]

I can confirm it's working with the emergency release. Thanks a lot!

[H--o-l]

Thanks guys, I close the issue.

[briandipalma]

Is my guess correct that several different projects are trying to inject fake/virtual files into the webpack FS cache and all broke because the internals that they were using changed? If so I think that caused us problems too. Could we get an official API to allow us to add virtual files to the webpack FS?

[sokra]

There is an official API => Create a Decorator for the filesystem. Pass this decorated filesystem as option to the Resolver factory (for enhanced-resolve). Resp. set inputFileSystem on the Compiler in the environment hook (for webpack).

[briandipalma]

Thanks for the reply, is there an example of what you are talking about somewhere?

[filipesilva]

@briandipalma here's an example of how we're doing it in Angular CLI: angular/angular-cli#7471

[cristhiank]

Why is this issue closed ? It's still not fixed in [email protected]

[Basel78]

Hi people,
I am relatively new to angular, just started 2 months ago, learning about stuff like: Typescript,angular, bundle, NgModule, Rollup,Webpack,.."I had angularJS previous experience and longer .NET" after building my first word addin using angular2/typescript
I started looking deep into angular-cli and building libraries with I faced some problems and solved most of it until I was stopped by the error "Error: Can't resolve './$$_gendir/app/app.module.ngfactory'" when I add my library that was build using https://github.com/jvandemo/generator-angular2-library
then I found the issue addressed here and followed the instructions as mentioned by "filipesilva" in the link above on his comments, I updated the package.json and packages/@ngtools/webpack/package.json as said but couldn't find yarn.lockfile in angular-cli project..
anyway I run "ng build --aot" and still getting the same error when run "ng serve" its gone and the site started but I am getting the sad error "vendor.bundle.js:16342 Uncaught Error: Unexpected value 'AppRoutingModule' imported by the module 'AppModule'. Please add a @NgModule annotation"
Please advice me how to resolve this issue, is there a better why to build and consume angular libraries

Thanks

[filipesilva]

@Basel78 heya, issues like that should be opened against https://github.com/angular/angular-cli/ and not here. The problem described here hasn't affected Angular CLI projects for a while, so I don't think the problem you are experiencing is related. Please make sure to check the existing issues and https://github.com/angular/angular-cli/wiki/stories-linked-library before opening a new issue though.

[Basel78]

@filipesilva will do thanks for your response and help

[filipesilva]

@briandipalma heya, I was having some more trouble with file watchers in the virtual file system, which I documented here: webpack/webpack#5824. I initially reported it as a bug but it's really just a matter of decorating NodeWatchFileSystem as well.

[briandipalma]

Thanks for the heads up @filipesilva we have been seeing issues on file watch rebuilds.