ng serve recompile time very slow

[scuffedshoe]

Using 'ng serve' the webpack compile and recompile on code changes takes sometimes more than a minute.

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: 7.6.0
os: darwin x64
@angular/common: 4.0.3
@angular/compiler: 4.0.3
@angular/core: 4.0.3
@angular/forms: 4.0.3
@angular/http: 4.0.3
@angular/platform-browser: 4.0.3
@angular/platform-browser-dynamic: 4.0.3
@angular/router: 4.0.3
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.3

Repro steps.

1. ng serve
2. make change to any file (json, ts, html)
3. wait for browser to reload...

The log given by the failure.

$xxxx ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: 15921d5ca032c405df0a
Time: 43310ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 231 kB {5} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 389 kB {4} [initial] [rendered]
chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 515 kB {5} [initial] [rendered]
chunk {3} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB {5} [initial] [rendered]
chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.61 MB [initial] [rendered]
chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 74ff0fd808586e648c85
Time: 52972ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 231 kB {5} [initial]
chunk {1} main.bundle.js, main.bundle.js.map (main) 389 kB {4} [initial] [rendered]
chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 515 kB {5} [initial]
chunk {3} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB {5} [initial]
chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.61 MB [initial]
chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.

Desired functionality.

Compile and reload in 3-5 seconds or so

Mention any other details that might be useful.

[filipesilva]

That's really really slow. It shouldn't be like that. Are you using the --aot flag?

[scuffedshoe]

No, I haven't been using the --aot flag. Just a vanilla ng serve.

[scuffedshoe]

I think I have identified the source of the issue.

This is a very asset-heavy application, with multiple nested directories; the assets folder currently weighs in at 3.2 GB with over 2750 files. When I empty the assets folder, my compile time is 5 seconds or less.

Do you have any suggestions on dealing with tons of assets within this environment?

[filipesilva]

Uff.... yeah for that kind of asset size I think that's better to copy them over in a script. The build pipeline watches over all the assets for changes, so it's probably really stressing your system.

I don't have any good way besides copying them over separately, I'm sorry :/

[scuffedshoe]

If I'm doing an ng serve though, is there anyplace I could copy them to? It makes sense to me for a ng build` since the dist folder is produced, but where do the serve files actually get served from?

[filipesilva]

Files for ng serve get served from memory, so there isn't a place to put them per se. Maybe you can proxy those asset request to a static server instead (https://github.com/angular/angular-cli/wiki/stories-proxy).

[scuffedshoe]

Ok, I'll look into that. I also saw that using ng build --watch might be an option.

Thanks for your help, and all of your great work!

[chrillewoodz]

I have this problem too without having any images or nothing, just modules and stuff. When changing a line of css sometimes it can take 30 sec to recompile. Really, really annoying. Something is clearly wrong somewhere, but I can't pinpoint what could be causing it as I'm following the official styleguide and best practices in general when writing my modules/components etc.

[stephengardner]

I ran into this issue --
Please make sure you don't have anything in your assets folder that is excessively large. If you're npm initting a separate project in a child directory, or something of this sort.

[kurtam]

I have this problem constantly. ng serve takes forever to start (sometimes >5 minutes).
This isn't with huge projects, or tiny memory constraints. In fact, just using ng new projectname and doing nothing else to the files, then trying to compile down/serve the files takes 45 seconds.
This is on a MacBook Pro with 2.5GHz dual i5 processors and 16GB of ram.

[Frix-x]

I ran into the same issue with ng serve, even on a dummy project : the command take sometimes a couple of minutes before printing "** Angular Live Development Server is listening....." and really starting the compilation.

This is on an almost new Win10, i7 6xxx and 16Go ram with Angular CLI 6.0.1

[kurtam]

Is there any way to profile the ng serve operation to find out where all the time is being sucked up? I just entered "ng serve --open --verbose. Took 1:40 to render the page (not much more than a dummy project)

About a minute passed with nothing (apparent) happening, then I got,
"** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **"

And it took about another 20 seconds to build and render the page.

Here's the whole output:

angularapp kurt$ ng serve --open --verbose
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
11% building modules 15/21 modules 6 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: /
18549ms building modules
9ms sealing
1ms optimizing
0ms basic module optimization
7ms module optimization
9ms advanced module optimization
12ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
0ms module and chunk tree optimization
0ms chunk modules optimization
0ms advanced chunk modules optimization
0ms module reviving
7ms module order optimization
3ms module id optimization
0ms chunk reviving
3ms chunk order optimization
12ms chunk id optimization
45ms hashing
1ms module assets processing
3787ms chunk assets processing
1ms additional chunk assets processing
119ms recording
1ms additional asset processing
0ms chunk asset optimization
27ms asset optimization
138ms emitting
Hash: 52bb2e79c921bd065d02
Version: webpack 3.10.0
Time: 22773ms
Asset Size Chunks Chunk Names
main.bundle.js 51 kB main [emitted] main
fontawesome-webfont.674f50d287a8c48dc19b.eot 166 kB [emitted]
fontawesome-webfont.b06871f281fee6b241d6.ttf 166 kB [emitted]
fontawesome-webfont.af7ae505a9eed503f8b8.woff2 77.2 kB [emitted]
fontawesome-webfont.fee66e712a8a08eef580.woff 98 kB [emitted]
inline.bundle.js 5.79 kB inline [emitted] inline
fontawesome-webfont.912ec66d7572ff821749.svg 444 kB [emitted] [big]
polyfills.bundle.js 562 kB polyfills [emitted] [big] polyfills
styles.bundle.js 652 kB styles [emitted] [big] styles
vendor.bundle.js 8.22 MB vendor [emitted] [big] vendor
scripts.bundle.js 465 kB scripts [emitted] [big] scripts
favicon.ico 5.43 kB [emitted]
index.html 677 bytes [emitted]
chunk {inline} inline.bundle.js (inline) 0 bytes [entry] [rendered]
chunk {main} main.bundle.js (main) 14.4 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 181 kB {inline} [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 0 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 222 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 2.96 MB [initial] [rendered]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 4.67 kB 0
chunk {0} index.html 346 bytes [entry] [rendered]
webpack: Compiled successfully.