Angular-cli: Windows ngtools/webpack AoT compilation hangs infinitely at 95% emitting

[mariussl]

OS

Windows 7 x64

Versions

angular-cli: 1.0.0-beta.18
node: 5.10.1
os: win32 x64

and after upgrading

angular-cli: 1.0.0-beta.18
node: 6.9.1
os: win32 x64

Repro steps.

I set up a repo with a testcase and description here.

In short: On Windows7 webpack aot compilation hangs indefinitly on "95% emitting". I did some debugging and finally wound up in webpack/lib/Compiler.js Compiler.prototype.emitAssets line 288.. . It seems that the path for the source-map file is generated incorrectly by concatenating 2 absolute paths in line 310: this.outputFileSystem.join(outputPath, dir) . This leads to an endless loop of failed directory creations and hangs the compilation process.

Removing devtool from the webpack configuration solves the problem (albeit loosing the source-map). Further testing shows that replacing styleUrls with styles in app.component.ts also solves the problem (albeit loosing the external css file).

The log given by the failure.

66% building modules 468/474 modules 6 active ...node_modules\rxjs\util\errorOb
66% building modules 468/475 modules 7 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 469/475 modules 6 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 470/475 modules 5 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 471/475 modules 4 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 472/475 modules 3 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 473/475 modules 2 active ...ules\rxjs\util\UnsubscriptionE
66% building modules 474/475 modules 1 active ...ules\rxjs\util\UnsubscriptionE
95% emitting

Mention any other details that might be useful.

The bug was reproducable on another Windows7 development system.

Update, 2016-12-16

I upgraded to @ngtools/webpack 1.1.9 and the bug is still there. But I found a workaround by switching from css to less: In webpack.config.js:

{ test: /\.less$/, loaders: ['to-string-loader', 'css-loader', 'less-loader']},

And in app.component.ts:

styleUrls: ['./app.component.less']

Works for me so far.

Update, 2017-01-04

I updated to node 6.9.3 and npm 4.1.1. Additionally I upgraded @angular, @ngtools and various dependecies (see package.json in test repo).

Result: Still hangs at 95€ emitting.

Update, 2017-02-16

I updated @ngtools/angular to version 1.2.9. Now it works. Bug closed.

[yurlovm]

+1

[unsafecode]

+1

[carol-braileanu]

+1

[kamarouski]

Have the same issue here with ngtools 1.2.1 & webpack 2.1.0-beta.25

The process hangs on 95% when referencing SASS files for components. That's pretty much a show stopper for us to using AoT compilation :(

[drooks]

I had this issue and was able to fix after:

• updating node to 6.9.2 https://nodejs.org/en/
• updating npm npm install npm@latest -g

Hope this helps

[mariussl]

I had this issue and was able to fix after:
updating node to 6.9.2 https://nodejs.org/en/
updating npm npm install npm@latest -g

I updated to node 6.9.3 and npm 4.1.1. Additionally I upgraded @angular, @ngtools and various dependecies (see package.json in test repo).

Result: Still hangs at 95€ emitting.

[sustwater]

+1

[kamarouski]

Still have this issue with the latest ngtools and webpack

Environment:
OS: Windows 10 x64
Node: v6.9.5\v7.5.0
Webpack: 2.2.1
@ngtools\webpack: 1.2.8

Webpack hangs indefinitely on 95% emitting phase.

[mariussl]

I updated @ngtools/angular to version 1.2.9. Now it works. Bug closed.

[kamarouski]

Updated to 1.2.9 and still the same. Works fine without SASS, though hangs right after including reference to a sass file.

@mariussl Can you please share your webpack and tsconfig.

[mariussl]

@kamarouski : Just have a look at the repo with the testcase. You can verify that it works and examine the config.

[bstaley]

@mariussl I pulled down your repo and it worked until i swapped out the raw-loader on the css rule to a style-loader. This change produced the 95% emitting freeze for me.

[dobbydog]

@bstaley Components styles (and templates) need to be loaded with raw-loader. If you need to use style-loader for other styles, you should change rules like this

{
  test: /\.component\.css$/,
  use: ['raw-loader']
},
{
  test: /\.css$/,
  exclude: /\.component\.css$/,
  use: ['style-loader']
},

[kamarouski]

@mariussl the test case uses css not sass. I'll try to change it to sass to see if the issue can be reproduced.

[MarkPerryBV]

@dobbydog Thank you so much for this. I had been following an ngTool/webpack error for DAYS!!!

Turned out it was the styleUrls in the @component decorators causing the bug. Your comment just helped me fix it.

[nitimmerman]

@kamarouski I've tested this last week with sass and it looks like this library still has problems with handling SASS files.
Could this issue be reopened please? this is my setup:

node: 6.11.0
webpack 2.6.1
os: win32 x64

I've used this repository and changed one css file to a .scss extension

[mcm-ham]

I'm experiencing this with SASS files with AOT build. For some reason compilation.assets in emitAssets contains a list of sass files of type CachedSource with full paths in addition to output file which cause issues when prefixed with output directory in mkdirP due to colon character.

c:\output\c:\component.scss

[JohnGalt1717]

@mcm-ham me too! Any work around?

[olezt]

For me after 2 days,
I found out that I had to manually install "node-sass" and add these loaders (also for node modules):

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'raw-loader',
                    'sass-loader'
                ]
            }

And resolve:

resolve: {
        extensions: ['.ts', '.js', '.json']
    }

[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._}