Angular-cli: 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 ngbuild` 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.

[vermadev95]

You can use this flag while compiling:
ng serve --source-map=false

It take 10sec to compile now while previously it was taking 32sec.
source-map is just used for debugging. So if not using debugger you can disable and compile.

[alkapwn3d]

I was trying to figure out why my computer was slowing down and I realized ng was starting a new conhost.exe everytime it recompiled my site.

When one of you mentioned that it was because the asset files might be too big I realized that it was doing this whenever I made changes to my CSS file while running ng serve

Kinda sucks that this happens because I'd like to use it like a live reload to see changes as I make them.

Just letting you guys know that's a thing that happens.

[suchetaswabhav]

Hi ,

Can some one help me .
I am using Neo4j application to build and integrate it to an angular and nodejs app.
I am using Core UI - angular template. It it complies within 2 minutes. However, when i include the Neovis.js that is Neo4j app library , it takes around 20 minutes to compile. Please help.

[dkuhlmann]

Update Node to v11 solved it for me.

[Smith5646]

I just wanted to add something that I just found in the hopes that someone can help me and this might help someone else identify their slowdown. I found that if the source directory is on my local machine, it runs MUCH faster than if the source is on a server with a share that I am accessing with my local machine. Even if I have the option set that the files are always available (even offline), it still takes a LONG time. I don't know if it has something to do with the 28K files involved across a share or what and if so, how to fix it.

One other note, I did this test with a new project so it isn't anything extra that I've added.

Any ideas?

[BambiB]

Changed from a traditional HD to an SSD and found time DRASTICALLY reduced. Leads me to believe it's a whole lot of disk access that's slowing things down.
Is there anything in the build that determines whether or not a file NEEDS to be recreated?

[tanlah]

@BambiB no offense, but no serious developer should be developing on a HDD nowadays

[jishcem]

Just in case if somebody did the mistake that I did.

I created a "local" configuration by mistake. - that is by creating another section in the "configurations" area of angular.json and setting this in the ng serve --configuration=local - then the compiling turned very slow. But, the normal ng serve without --configuration flag was fast as normal.

So, I think to "develop" the default configuration of ng serve is enough.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}