ng serve crashes after second save angular-cli v6.2.4

[pmeems]

This seems a regression of #8522

I've been using Angular-CLI v6.0.8 for months without any problem.
Today I decided to upgrade to the latest version: v6.2.4

When I run ng server I don't have any problems, but when I ---aot every second save crashes the cli.

My IDE is WebStorm.

The changelog of my package.json:

The NPM debug log:

0 info it worked if it ends with ok
1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@5.6.0
3 info using node@v8.11.3
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle myApp@0.0.2~prestart: myApp@0.0.2
6 info lifecycle myApp@0.0.2~start: myApp@0.0.2
7 verbose lifecycle myApp@0.0.2~start: unsafe-perm in lifecycle true
8 verbose lifecycle myApp@0.0.2~start: PATH: D:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\dev\myApp\Src\myApp\node_modules\.bin;C:\Perl64\site\bin;C:\Perl64\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Common Files\Adobe\AGL;C:\Program Files (x86)\GDAL-b\;J:\Akkerweb.Shared\GDALv2\;J:\Weather\GDALv212-64b\;D:\Program Files (x86)\Mono-3.2.3\bin\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;D:\dev\SysInternals\;C:\Program Files (x86)\Topoprogram\Common;d:\Program Files\doxygen\bin;D:\Program Files (x86)\Graphviz2.38\bin;C:\Program Files\dotnet\;C:\WINDOWS\System32\OpenSSH\;D:\Program Files\nodejs\;C:\Program Files (x86)\IncrediBuild;C:\Program Files (x86)\dotnet\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Common Files\Adobe\AGL;D:\Program Files (x86)\Mono-3.2.3\bin\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;D:\Program Files\Git\cmd;C:\Program Files (x86)\Topoprogram\Common;
9 verbose lifecycle myApp@0.0.2~start: CWD: D:\dev\myApp\Src\myApp
10 silly lifecycle myApp@0.0.2~start: Args: [ '/d /s /c', 'ng serve --aot --port 4250' ]
11 silly lifecycle myApp@0.0.2~start: Returned: code: 1  signal: null
12 info lifecycle myApp@0.0.2~start: Failed to exec start script
13 verbose stack Error: myApp@0.0.2 start: `ng serve --aot --port 4250`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid myApp@0.0.2
15 verbose cwd D:\dev\myApp\Src\myApp
16 verbose Windows_NT 10.0.17134
17 verbose argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v8.11.3
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error myApp@0.0.2 start: `ng serve --aot --port 4250`
22 error Exit status 1
23 error Failed at the myApp@0.0.2 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[markgoho]

I am also seeing this behavior in an existing app that I just upgraded, however upon fresh installation of a new app, I can't reproduce it.

[spaceman101]

We have exactlly the same problem, hope it gets resolved soon.

`i ｢wdm｣: Compiling...
C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:92
throw data[0];
^

Error: ENOENT: no such file or directory, stat 'C:\Dev2\RevueDePrets\projet\src\URP.WebApp\src\app\app.component.ngfactory.js'
at Object.fs.statSync (fs.js:948:11)
at Object.statSync (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\graceful-fs\polyfills.js:297:22)
at Storage.provideSync (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)
at CachedInputFileSystem.statSync (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:251:28)
at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\src\webpack-input-host.js:70:52)
at Observable._trySubscribe (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\rxjs\internal\Observable.js:43:25)
at Observable.subscribe (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\rxjs\internal\Observable.js:29:22)
at MapOperator.call (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\rxjs\internal\operators\map.js:29:23)
at Observable.subscribe (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules\rxjs\internal\Observable.js:24:22)
at SyncDelegateHost._doSyncCall (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:22:20)
at SyncDelegateHost.exists (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:61:21)
at WebpackCompilerHost.fileExists (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\src\compiler_host.js:195:44)
at VirtualFileSystemDecorator._statSync (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:24:39)
at VirtualFileSystemDecorator.statSync (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:60:29)
at virtualFilesStats._virtualInputFileSystem.getVirtualFilesPaths.map (C:\Dev2\RevueDePrets\projet\src\URP.WebApp\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:123:54)
at Array.map ()
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! urp.webapp@0.0.0 start: ng serve --aot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the urp.webapp@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\massonp3\AppData\Roaming\npm-cache_logs\2018-10-12T13_46_46_129Z-debug.log`

[spaceman101]

@filipesilva 👍
Steps to reproduce..
ng new test1
cd test1
ng serve --aot

then edit one of the project file (.ts or ,html) and save it... then the compiler crash,,,

[filipesilva]

@spaceman101 I think something is missing from that repro, because I can't see it happen locally:

$ ng serve --aot
Date: 2018-10-12T15:35:00.392Z
Hash: 4e6169354defcec46a89
Time: 10540ms
chunk {main} main.js, main.js.map (main) 22.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.08 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-10-12T15:35:04.027Z - Hash: 237ae7d9f97b67199c43 - Time: 1517ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 22.7 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-10-12T15:35:05.877Z - Hash: 68333ef4854c0a8c6a3d - Time: 766ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 32.4 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-10-12T15:35:07.597Z - Hash: e8c5098eadc7002e52b6 - Time: 656ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 32.4 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-10-12T15:35:09.480Z - Hash: 0383bbc278eb2fe0c5b1 - Time: 820ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 32.4 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

If you have a new project that shows that behaviour can you commit it to github and share it here please?

[spaceman101]

test3.zip

This other thread has people having the same problem lately.
#12260

[filipesilva]

@spaceman101 awesome, thanks. I can't look at it today because I'm already out but can look at it Monday morning.

Can you also tell me exactly what you do to trigger the rebuild please? The file you change, and how you change it.

[filipesilva]

The exact console output you see would also help a lot.

[spaceman101]

I change the value of the var title in app.component.ts and save it. I've reproduced it with the project open in Visual Studio Code and also juste by editing the file in notepad++.

C:\Dev2\test\test3>ng serve --aot
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-12T16:27:22.441Z
Hash: 355498247742d7f883be
Time: 7736ms
chunk {main} main.js, main.js.map (main) 22.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.08 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
C:\Dev2\test\test3\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:92
                                        throw data[0];
                                        ^

Error: ENOENT: no such file or directory, stat 'C:\Dev2\test\test3\src\app\app.component.ngfactory.js'
    at Object.fs.statSync (fs.js:948:11)
    at Object.statSync (C:\Dev2\test\test3\node_modules\graceful-fs\polyfills.js:297:22)
    at Storage.provideSync (C:\Dev2\test\test3\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.statSync (C:\Dev2\test\test3\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:251:28)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\Dev2\test\test3\node_modules\@ngtools\webpack\src\webpack-input-host.js:70:52)
    at Observable._trySubscribe (C:\Dev2\test\test3\node_modules\rxjs\internal\Observable.js:43:25)
    at Observable.subscribe (C:\Dev2\test\test3\node_modules\rxjs\internal\Observable.js:29:22)
    at MapOperator.call (C:\Dev2\test\test3\node_modules\rxjs\internal\operators\map.js:29:23)
    at Observable.subscribe (C:\Dev2\test\test3\node_modules\rxjs\internal\Observable.js:24:22)
    at SyncDelegateHost._doSyncCall (C:\Dev2\test\test3\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:22:20)
    at SyncDelegateHost.exists (C:\Dev2\test\test3\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:61:21)
    at WebpackCompilerHost.fileExists (C:\Dev2\test\test3\node_modules\@ngtools\webpack\src\compiler_host.js:195:44)
    at VirtualFileSystemDecorator._statSync (C:\Dev2\test\test3\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:24:39)
    at VirtualFileSystemDecorator.statSync (C:\Dev2\test\test3\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:60:29)
    at virtualFilesStats._virtualInputFileSystem.getVirtualFilesPaths.map (C:\Dev2\test\test3\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:123:54)
    at Array.map (<anonymous>)

C:\Dev2\test\test3>

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 6.2.5
Node: 8.11.3
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.8.5
@angular-devkit/build-angular 0.8.5
@angular-devkit/build-optimizer 0.8.5
@angular-devkit/build-webpack 0.8.5
@angular-devkit/core 0.8.5
@angular-devkit/schematics 0.8.5
@angular/cli 6.2.5
@ngtools/webpack 6.2.5
@schematics/angular 0.8.5
@schematics/update 0.8.5
rxjs 6.2.2
typescript 2.9.2
webpack 4.20.2

[smasala]

Workaround: #12260 (comment)

[spaceman101]

Workaround: #12260 (comment)

Nope, that's the angular.json part in the project:

architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/test3",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

[smasala]

@spaceman101 when you use the latest angular-cli and ng new myapp then the entire "src/favicon.ico" line needs to be removed to prevent the following error on ng serve --aot:

Error: #12553 (comment)

[clydin]

It appears the issue is copy-webpack-plugin@4.5.3. If you are using yarn, you can add a resolutions field to package.json to force the use of version 4.5.2. For npm, you can try to install the package as a development dependency also at 4.5.2 (for npm, this unfortunately may or may not work depending on how npm hoists the packages). There is a PR with a fix for copy-webpack-plugin which will hopefully be in version 4.5.4.