1.5 & 5.0.1 slow chrome loading with ng serve, crash on incremental save with ng serve --aot

[subatomicglue]

Bug Report or Feature Request (mark with an x)

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

• Slow loading (now ~32sec up from ~17sec) in chrome with ng serve makes development iteration much slower for us,
• With ng serve --aot loading is GREAT (~5sec), but there is a crash, or very long hang at 10%, on incremental file save.

Versions.

Angular CLI: 1.5.0
Node: 7.5.0
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

Use angular-cli 1.5 and angular 5.0.0 (or 5.0.1, I tested both)
on a largish project:

> find src -type f | grep -v spec.ts$ | grep .ts$ | wc -l
     140
> ls -l node_modules/ | wc -l
     925
>  ls -l src/assets/ | wc -l
      72
> du -sh src/assets/
     3.1M    src/assets/

Also seeing building modules 1819/1819 modules during the ng serve startup

• Run ng serve, load this large project in Chrome. Observe the slower load time from Angular 4.2.4.
• Run ng serve --aot, on a large project, Modify one of your **component.ts files (mine has 3 other dependencies), observe a crash, or infinite hang at 10% (or really slow recompile??)

The log given by the failure.

> date && ng serve
Fri Nov 10 11:50:41 CST 2017
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 12% building modules 21/28 modules 7 active .../webpack-dev-server/client/overlay.js(node:29335) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Date: 2017-11-10T17:28:45.958Z
Hash: c1f292ed36fc8e29eda6
Time: 136191ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 80.8 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.56 MB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 1.32 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 23 MB [initial] [rendered]

> date
Fri Nov 10 11:52:29 CST 2017

> date && ng serve --aot
Fri Nov 10 11:47:10 CST 2017
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 8/15 modules 7 active .../webpack-dev-server/client/overlay.js(node:29963) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Date: 2017-11-10T17:36:05.258Z
Hash: 173d44c5a41d4fab7c71
Time: 139205ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 42.2 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.56 MB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 1.32 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 19.9 MB [initial] [rendered]

> date
Fri Nov 10 11:49:32 CST 2017

Loading in Chrome has become ridiculously slow with ng serve:

ng serve built app (Performance graph from Chrome devtools):

ng serve --aot built app (Performance graph from Chrome devtools):

Summary (slow chrome loading in dev ng serve , crash on incremental save ng serve --aot):
ng serve = 1min 48sec
incremental save of typical component .ts file = 4-7sec
loading in chrome = >32,000ms (<----- VERY SLOW, bad for dev iteration)

ng serve --aot = 2min 20sec
incremental save of typical component .ts file = 1min, then CRASH with FATAL ERROR
loading in chrome = ~5,000ms

The incremental (on file save) ng serve --aot also crashes:

webpack: Compiling...
 10% building modules 0/1 modules 1 active ...myApp/src/app/app.module.ngfactory.js
<--- Last few GCs --->

[32702:0x103000000]   222445 ms: Mark-sweep 1399.0 (1610.9) -> 1399.0 (1611.9) MB, 366.7 / 0.0 ms  allocation failure GC in old space requested
[32702:0x103000000]   222918 ms: Mark-sweep 1399.0 (1611.9) -> 1398.6 (1576.9) MB, 472.8 / 0.0 ms  last resort gc
[32702:0x103000000]   223340 ms: Mark-sweep 1398.6 (1576.9) -> 1398.5 (1575.9) MB, 422.7 / 0.0 ms  last resort gc


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x21179e5c0d39 <JS Object>
    1: StringReplaceGlobalRegExpWithFunction [native regexp.js:~446] [pc=0x248f7f367ca](this=0x363ac93945a9 <JS Global Object>,V=0x14a333b04201 <Very long string[112257]>,B=0x13cb7b7c8a09 <JS RegExp>,av=0x39348fbee3f1 <JS Function (SharedFunctionInfo 0x2181e15b5371)>)
    2: RegExpReplace [native regexp.js:~526] [pc=0x248f8d2dc9d](this=0x13cb7b7c8a09 <JS RegExp>,C=0x14a333b04201 <Very long stri...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [.../.nvm/versions/node/v7.5.0/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [.../.nvm/versions/node/v7.5.0/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [.../.nvm/versions/node/v7.5.0/bin/node]
 4: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [.../.nvm/versions/node/v7.5.0/bin/node]
 5: v8::internal::Runtime_StringBuilderConcat(int, v8::internal::Object**, v8::internal::Isolate*) [.../.nvm/versions/node/v7.5.0/bin/node]
 6: 0x248f31063a7
 7: 0x248f7f367ca
 8: 0x248f8d2dc9d
 9: 0x248f87bd347
Abort trap: 6 (core dumped)

Sometimes doesn't crash, but hangs for a long time at 10% (never seen it finish)

Desired functionality.

ng serve chrome loading is much slower than 4.2.4. It needs to be fast for efficient development
ng serve --aot incremental saving seems to crash, or hang for a long time. It needs to not crash

Right now both options are undesirable, so we are stuck unable to upgrade to Angular5

Mention any other details that might be useful.

Doing ng new myApp and then ng serve or ng serve --aot is actually very fast (instant, I dont see any "loading" from index.html). But look at the size of my project.

Previously with Angular 4.2.4 we were getting ~17sec load times in Chrome, and comparable ng serve times.

My preference is to use ng serve --aot, so if we can fix the crashing, I think it's a workable solution for us.

[subatomicglue]

I found a workaround:

node --max_old_space_size=16192 node_modules/.bin/ng serve --aot

This increases the amount of memory available, which seems to avoid the crash.
Should the developer really need to think about this? Shouldn't the ng handle its memory for us? Seems strange.

[subatomicglue]

Bad news:

When using typescript 2.6.1 with ng serve --aot, I get this error when incrementally saving a .html or .ts file
(Which the fix here says to downgrade to typescript 2.4.2...)

ERROR in Error: Debug Failure. False expression: Host should not return a redirect source file from `getSourceFile`
    at tryReuseStructureFromOldProgram (.../node_modules/typescript/lib/typescript.js:72100:26)
    at Object.createProgram (.../node_modules/typescript/lib/typescript.js:71808:34)
    at AngularCompilerProgram._updateProgramWithTypeCheckStubs (.../node_modules/@angular/compiler-cli/src/transformers/program.js:461:30)
    at .../node_modules/@angular/compiler-cli/src/transformers/program.js:149:23
    at process._tickCallback (internal/process/next_tick.js:103:7)

When using typescript 2.4.2 with ng build -prod, I get this error.
(Which the fix here says to upgrade typescript to 2.6.1.)

ERROR in ./node_modules/rxjs/_esm5/observable/BoundNodeCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode (node_modules/typescript/lib/typescript.js:9341:17).

So I am in a catch 22, where I need typescript 2.4.2 for ng serve --aot and typescript 2.6.1 for ng build --prod.

[subatomicglue]

using typescript 2.6.2 seems to work with ng serve and ng build -prod both. (Still got the above error with ng serve --aot)
And ng serve is recompiling super fast and then re-loading in chrome ~18sec for me, so looks like it got faster... (was 32sec above) Will report back if I see anything strange.

[filipesilva]

Heya @subatomicglue, I'm sorry it took me this long to get to your issue and thanks for taking the time to document all the things you attempted.

I'm not sure how much Typescript 2.6 is helping but we can't guarantee Angular works with it. Angular 5.1 supports Typescript 2.5 but not 2.6 yet. Have you tried with Angular 5.1 with 2.5?

We've also pushed a bunch of fixes for memory usage that are in Angular CLI 1.6.0. Those should help with rebuild speeds in some cases by reducing the amount of garbage collection runs.

Regarding the time JIT apps takes to reload in chrome, that is due to template compilation at runtime. If you have a lot of templates then they all need to be recompiled before your app shows up. AOT makes loading your app faster because it compiled the templates on the rebuild.

If you're using JIT you can make it faster by using lazy loaded routes. This way the templates for the lazy routes wont be compiled until you load that lazy route.

[devoto13]

@filipesilva This happens with both TS 2.5 and 2.6. I have done some preliminary investigation and prepared a simple repro for this bug. Please take a look here: https://github.com/devoto13/cli-rebuild-repro.

To me it looks like bug/limitation of TypeScript. Seems that createProgram() is not able to handle situation, where oldProgram contains source file with redirects.

After further investigation I think it is a bug in compiler-cli. Error message says that getSourceFile() should not return redirect file. And the implementation in TypeScript CompilerHost never does it, however CompilerHost implemented in Angular compiler-cli caches SourceFiles from old program in internal cache and returns them from the method. And cached files can be redirect files, which hits the assertion when creating a new program.