ng serve produces error randomly

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.0.0
node: 6.10.1
os: linux x64
@angular/animations: 4.0.0
@angular/cli: 1.0.0
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/compiler-cli: 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/platform-server: 4.0.0
@angular/router: 4.0.0
@ngtools/webpack: 1.3.0

Repro steps.

    ng serve

The log given by the failure.

Module build failed: Error
    at WebpackCompilerHost.populateWebpackResolver (/home/bunyamin/WebstormProjects/c3dp/node_modules/@ngtools/webpack/src/compiler_host.js:135:51)
    at _donePromise.Promise.resolve.then.then.then.then.then (/home/bunyamin/WebstormProjects/c3dp/node_modules/@ngtools/webpack/src/plugin.js:366:32)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./src/app/patient/patient-care-plan/index.ts 2:0-105
 @ ./src/app/patient/patient.module.ts
 @ ./src async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Desired functionality.

The project does not contain any error and works well. However, it gives the error above when it recompiled at some random moments.

Mention any other details that might be useful.

The most obvious example of this bug: I was working on my project (there were no errors) and I added just a comment like // some comment and it gave the error when recompiled. Then, I stopped and re-run the ng serve command and there were no error this time.

[isaacplmann]

I’m getting the same error. It only happens for me when I save a file that’s in a lazy loaded module. If I then save the app.component.ts file, the build succeeds (without needing to kill the process and restart). I haven’t been able to reproduce with a demo app though.

[scott-phillips-sp]

I looked into this problem and I believe it is a race condition between the invalidating & read files for the host compilation. As a project grows bigger the chance of the race condition increase. I tried to make a reproduction using a fresh app and tried with 10 components, but that wasn’t enough to reproduce the issue.

The issue is that there is a race condition invalidating a file:

Files will get invalidate here from a watch conidition: https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/plugin.ts#L273

They will get re-read here from the ngloader: https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/loader.ts#L454

However, if in between these two points the populateWebpackResolver is called it fail because the invalidate command removes the file from the cache. https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/compiler_host.ts#L149

I created a pull request that works for me locally with my app. It makes the change that when a file changes instead of removing it from the cache and waiting for the loader to re-load the file it will immediately re-read the changes and populate the cache. https://github.com/angular/angular-cli/pull/6920