enhanced-resolve: Angular 2 app doesn't build with last version (v3.4.0)

@sokra roger, we’ll move in that direction. That’s likely to fix other issues we were having. For now we’re pinning enhanced-resolved@3.3.0 in @ngtools/webpack and putting out an emergency release.

Thank you so much for looking into this. 💯

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

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 👍

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

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.

bisect says 03ef8f2b8d25bc976993eade7b1ed9caa2c7d0e1

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 (https://github.com/angular/angular-cli/issues/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.

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

Thanks. I’ll look into it.

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

nevermind I can use the repro case from the angular issue

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

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

@briandipalma here’s an example of how we’re doing it in Angular CLI: https://github.com/angular/angular-cli/pull/7471

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?

Sounds good

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

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.

Here it is:

git clone https://github.com/filipesilva/ngtools-bug
cd ngtools-bug
npm run webpack # this will show errors
npm i enhanced-resolve@3.3.0
npm run webpack # this will show no errors

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