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

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 12
Comments: 20 (1 by maintainers)

Most upvoted comments

@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

nitimmerman on Jun 20, 2017

@mcm-ham me too! Any work around?

JohnGalt1717 on Jul 18, 2017

@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']
},

dobbydog on Feb 18, 2017

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.

kamarouski on Feb 12, 2017

carol-braileanu on Nov 10, 2016

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']
    }

olezt on Nov 15, 2017

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

mcm-ham on Jul 16, 2017