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.