Stuck @ 70% When Building for Production (70% building modules 852/852 modules 0)

[jwuliger]

Versions

Angular CLI: 6.0.0-beta.3-62d3c05
Node: 8.9.4
OS: win32 x64
Angular: 6.0.0-beta.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

@angular/cdk: 6.0.0-beta.2-64ef3a8
@angular/cli: 6.0.0-beta.3-62d3c05
@angular/flex-layout: 2.0.0-beta.12-8bdc586
@angular/material: 6.0.0-beta.2-64ef3a8
@angular-devkit/build-optimizer: 0.4.2
@angular-devkit/core: 0.4.2
@angular-devkit/schematics: 0.4.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.3-62d3c05
@schematics/angular: 0.4.2
@schematics/package-update: 0.4.2
typescript: 2.6.2
webpack-bundle-analyzer: 2.11.0
webpack: 4.0.0

Repro steps

• After updating to the latest CLI Build, I use the following CLI command located in my package.json file.

• ng build --verbose -prod -aot --namedChunks --output-hashing none --build-optimizer true --app site --extract-licenses false --service-worker true --preserve-symlinks

• I use yarn build:pwa to execute. I get no error of any kind. I am using a mono-repo, although I am not sure how that could be an issue.

Observed behavior

The build begins but then hangs at 70%.

yarn run v1.3.2
$ ng build --verbose -prod -aot --namedChunks --output-hashing none --build-optimizer true --app site --extract-licenses false --service-worker true --preserve-symlinks
 10% building modules 3/3 modules 0 active(node:20064) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:20064) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead                                        24778ms building modules
34ms finish module graph
4ms sealing
0ms basic dependencies optimization
86ms dependencies optimization
0ms advanced dependencies optimization
70ms after dependencies optimization
0ms optimizing
1ms basic module optimization
78ms module optimization
36ms advanced module optimization
1ms after module optimization
125ms basic chunk optimization
1ms chunk optimization
19ms advanced chunk optimization
113ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms after chunk optimization
3ms module and chunk tree optimization
 70% building modules 852/852 modules 0

Desired behavior

Build my app :)

Mention any other details that might be useful (optional)

I can provide ANY bit of information that can help. Please let me know. Thanks for all your great work! Looking forward to resolving this.

Thanks.

[JPM84]

same issue here...

[filipesilva]

I see you're using 6.0.0-beta.2-64ef3a8, one of the latest snapshots with Webpack 4. If you can provide us with a repro maybe we can look into it, but as is I have absolutely no idea of what's happening.

[jwuliger]

Hello, @filipesilva Let me try to recreate the issue in an app that is not private. I will do that now and keep you updated. Also as an FYI, I am using this environment now:

Angular CLI: 6.0.0-beta.3-26355a9
Node: 8.9.4
OS: win32 x64
Angular: 6.0.0-beta.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

@angular/cdk: 6.0.0-beta.2-d078e5e
@angular/cli: 6.0.0-beta.3-26355a9
@angular/flex-layout: 2.0.0-beta.12-8bdc586
@angular/material: 6.0.0-beta.2-d078e5e
@angular-devkit/build-optimizer: 0.4.2
@angular-devkit/core: 0.4.2
@angular-devkit/schematics: 0.4.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.3-26355a9
@schematics/angular: 0.4.2
@schematics/package-update: 0.4.2
typescript: 2.6.2
webpack-bundle-analyzer: 2.11.0
webpack: 4.0.1

With the same issue. It is only when you build for production. doing a simple serve works just fine. Thanks and I will get you a repo.

[jwuliger]

@filipesilva I was not able to reproduce this error with a fresh project. So please find a version of the repo demonstrating the problem. I hope this helps!

I thank-you for your time, please let me know if there is anything I can do to help!

REPO:
https://github.com/jwuliger/ng-cli-build-error

Just do a Yarn Install, then yarn start for dev or yarn build:pwa in the terminal to build for prod. This is where you will see the problem.

Thanks!

[filipesilva]

This seems to be a problem in webpack proper: webpack/webpack#6613. That threads indicates it might even be a bug in TurboFan.

[clydin]

If using a 6.0.0 beta release and a production build appears to be stalled at 70%, please try the build with CSS extraction disabled.

ng build --prod --extract-css false

There appears to be an issue with the extract-text-webpack-plugin beta version which supports Webpack 4. We are currently investigating the cause and will continue to update the thread with any additional information.

Note there is also a performance issue at 79% due to the above referenced issue but within the Webpack ModuleConcatentationPlugin. However, while this stage may take some time for large projects it will eventually finish. This is being investigated by the Webpack team.

[jwuliger]

@filipesilva A good find! Thanks!! @clydin Thank-you also for this tip. I see the issue now. The joys of front-end dev :) I will play with the ng build --prod --extract-css false option. Thanks again to you all.

[dottodot]

I'm having the same issue

$ ng build --app 0 --prod --aot -sm
 10% building modules 2/2 modules 0 active(node:2304) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 77% module and chunk tree optimization ExtractTextPlugin

but adding extract-css gets a bit further and then gets stuck again

$ ng build --app 0 --prod --aot -sm --extract-css false
 10% building modules 2/2 modules 0 active(node:2272) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 92% chunk asset optimization UglifyJSPlugin

[jwuliger]

Hi Guys!

After reading through some of the current issues, and the offered workarounds right now. I was able to build my large repo for production using this command:

ng build --app=site --service-worker=false --extract-licenses=false --extract-css=false --environment=prod --target=production --output-hashing=all --verbose --progress --delete-output-path --preserve-symlinks --build-optimizer --show-circular-dependencies --skip-app-shell --aot

Yes, it's a long one, but hey it works!

This is the environment I am using now:

Angular CLI: 6.0.0-beta.5-b1ed4f7
Node: 8.10.0
OS: win32 x64
Angular: 6.0.0-beta.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cdk: 6.0.0-beta.4-54252d5
@angular/cli: 6.0.0-beta.5-b1ed4f7
@angular/flex-layout: 5.0.0-beta.13
@angular/material: 6.0.0-beta.4-54252d5
@angular-devkit/build-optimizer: 0.4.5
@angular-devkit/core: 0.4.5
@angular-devkit/schematics: 0.4.5
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.5-b1ed4f7
@schematics/angular: 0.4.5
@schematics/package-update: 0.4.5
typescript: 2.6.2
webpack: 4.0.1

I hope this can help someone in a similar situation. I am also sure that you don't need to use all the flags I did (although not tested). I think the key here from when I first reported the issue; is a combination of using the latest beta build in conjunction with the command --extract-licenses=false

Cheers!

[jtomaszewski]

For me, it was issue with extract-text-webpack-plugin, which has a very buggy support for webpack 4 ( webpack-contrib/extract-text-webpack-plugin#749 ) .

Switching to mini-css-extract-plugin solved the infinitely ongoing 70% building modules 4002/4002 modules 0 error for us.

[britvik]

I had the same problem on v6.0.1. My cmd window got unresponsive at 68-70% as if it was inside an infinite loop. Turning off css or licences extraction did not help.

But after restarting my pc (because I thought someone was locking the files) it got to 92% and then crashed. Luckily it showed me some errors this time. I've fixed them and then it completed to 100%.

This line was causing the build to hang:
background: transparent url(asset-path("icon-spinner.gif")) no-repeat left 50%;
Build passed after removing the line.

So if you have the same problem. Check your styles.

[josketres]

We had the same problem in our project and debugged it.
node --inspect-brk node_modules/@angular/cli/bin/ng build --prod --verbose
See https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js

When the process was hanging (20% building modules 89/138 modules 49 active …) we paused the debugger and analysed the stack-trace.

We found out it was hanging in typescript.js being called by the build-optimizer.ts

Inspecting the variables we could see that the file causing the problem was a library we were importing :js-md5

We just removed the library and ng build --prod was working again!

I hope it helps you to find out why your ng build --prod is hanging.

[roldengarm]

Thanks @josketres ! Saved my day.
In my case it was: https://www.npmjs.com/package/@turf/turf

However, we're actively using this library. How can I fix this? It was working fine in Angular v5.

@filipesilva any suggestions?

[jacknkandy]

Hey @roldengarm, I have just encountered the exact same issue as you. Did you end up solving this?

[MrDroid17]

Hey @josketres i also encountered this issue.

20% building modules 89/119 modules 30 active …ules/@agm/core/directives/data-layer.jsKilled

i am using

ng build --configuration=staging

have you idea what could be the possible cause for this issue? please help me out
thanks

[MrDroid17]

this works for me:

ng build --configuration=staging --buildOptimizer=false

[mgechev]

Looks like this issue is resolved in v6.0.0. If you're still facing this problem, please open a new issue. // cc @clydin

[angular-automatic-lock-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.}