angular-cli: Halting Problem at 95%. Shows emitting as the action doing.

In my case, the problem was solved by updating devkit package ng update @angular-devkit/build-angular

Why is this issue closed? On Angular/CLI 6.1.1 the issue still occurs when I have optimization enabled @hansl ?

Turns out the reason my initial repro did not work was because the component CSS needed to have some content, not only exist.

So having some basic CSS on src/app/app.component.css like:

h1 {
  background-color: #000;
}

On a starter project and running ng build --aot --optimization --source-map will always reproduce the problem.

Changing that to a .scss file like @hahn-kev mentioned will make the bug go away.

So now we know that it’s definitely related to CSS files specifically and content is needed to reproduce.

any solution for 95% emitting CopyPlugin (version 7)

Why it hangs at 95%?

On webpack Compiler.js, method emitAssets(), a badly formed directory name is passed (the drive letter included twice) to mkdirp. It hangs because of [0]. It looks like it’s an issue only on Windows.

What makes it hang?

Indeed the source maps for the styleUrls. Unlike the js files, these css files are referenced by the full path. I guess previously they weren’t generated. I’m not sure exactly what to make of those, but extracting a relative path might help. I’m curious how is the output on non-Windows platforms.

// need to call this on mkdirp and writeFile
const relativePath = makePathsRelative(this.context, targetFile);

I’d say it’s okay to not generate .css.map for production builds. I don’t think they are useful.

@filipesilva how to proceed with this fix? This is a show stopper for v6.x for Windows users.

Refs: [0] https://github.com/substack/node-mkdirp/pull/125

I am experiencing this too with 1.7.3 on Windows 10. Build finishes normally if I remove --sourcemaps from parameters.

@awerlang I couldn’t reproduce using a project I had around, but could reproduce following your steps.

I was able to track down the precise flags to ng build --aot --optimization --source-map. It happens on the latest stable version and also on rc.1 (@angular-devkit/build-angular@0.7.0-rc.1 and @angular/cli@6.1.0-rc.1).

Following your hint of looking inside the node_modules/lib/Compiler.js and the emitFiles function (line 255), logging targetFile didn’t show me a badly formatted path but did show a absolute path:

$ ng build --aot --optimization --source-map --progress=false
D:\sandbox\cli-quickstart\src\app\app.component.css.map
runtime.js
vendor.js
styles.js
polyfills.js
main.js
runtime.js.map
vendor.js.map
styles.js.map
polyfills.js.map
main.js.map
favicon.ico
3rdpartylicenses.txt
index.html

Between projects that built, and projects that did not built, the difference seemed to be that absolute path.

Investigating further, it seems like this problem happens only for component css, when our internal CleanCssWebpackPlugin is used with sourcemap support, and only on some installs. It doesn’t happen on a brand new project, but seems to happen on a updated project.

I haven’t been able to track down which dependency is it that causes this. Comparing the dependency trees between a new project and a project that exhibits the bug didn’t show anything relevant… except maybe that in a bugged project I saw postcss-import@11.1.0 using resolve@1.8.1, and in a non-bugged project it was using resolve@1.1.7.

I pushed up a repro that exhibits this behaviour at https://github.com/filipesilva/angular-cli-9980. I used node 8.11.0 and npm 6.1.0 to install the dependencies.

Still looking further into this problem.

still happens in version 7 stuck on 95% emitting CopyPlugin

I have a project that started out using CSS and I switched to SCSS after a while. I’ve been having the halting problem. After reading your summary I checked to see if I have any CSS files still in use. After converting all my CSS files to SCSS the build started working again with source maps on.

So I can confirm that the issue is directly related to CSS files.

I find out that the problem happens when I try to build with parameter - - output-path

I’m avoiding the problem by running NG config set output-path before build

Same issue. This is not first time when you get information about problem and it meet’s with zero reaction from your side.

same here in 6rc6 infite : 95% emitting index-html-webpack-plugin with this config:

 "optimization": true,
              "outputHashing": "none",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true

same problem if I set buildOptimizer to false!

ps: it working when set optimization to false 95% step if finish in 1 second

(version : nodejs10, npm6, win64, angular6rc5, cli6rc6)

cc @clydin

I am able to reproduce the same with 6.2.1

@filipesilva Thanks for answering. This can be easily reproduced on Windows using quickstart: https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip

1. Unzip, then on a shell:
2. npm i
3. ng build --prod --source-map

Does anyone have a simple repro I can look at for this issue?

@awerlang you seem to have a very good idea of the problem. I think I know the general situation where a badly formatted directory name can be passed inside the CLI setup. If you can put together a simple repro that exhibits this behaviour maybe I can track it down.

The problem with configuring the output directory in the angular.json file is that the computer running the build is dynamic, in some builds the output directory is x:[variable folder2]\artifact in others it is D:[variable folder1]\artifact

I solved by running this sequence:

1. ng config projects.myProject.architect.build.configurations[$environment][“outputPath”] $environmentOutput
2. ng build --prod --c $environment

Our prod build runs as long as we’re not using maps, so while it’s not a breaking issue it is a serious qol issue. +1