Angular-cli: @ngtools/webpack problems with webpack extract-text-plugin

[GeorgeKnap]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Windows 10 64bit
npm version 3.10.6
nodejs version 6.10.0

Repro steps.

webpack config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var ngToolsWebpack = require('@ngtools/webpack');

module.exports = {
    entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },
    resolve: {
        /*
     * An array of extensions that should be used to resolve modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
     */
        extensions: ['.ts', '.js', '.json', '.less', '.scss', '.css', '.html'],
        modules: [helpers.root(), helpers.root('node_modules')]
    },

    resolveLoader: {
        modules: [helpers.root('node_modules')]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: '@ngtools/webpack',
                exclude: helpers.root('node_modules')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('app'),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('app'),
                loader: 'raw-loader'
            },
            {
                test: /\.scss$/,
                include: helpers.root('app'),
                loaders: ['raw-loader', 'sass-loader']
            },
            {
                test: /\.scss$/,
                include: helpers.root('styles'),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root()
        ),
        new ExtractTextPlugin({ filename: '[name].css'}),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),


        /*
         * Plugin: HtmlWebpackPlugin
         * Description: Simplifies creation of HTML files to serve your webpack bundles.
         * This is especially useful for webpack bundles that include a hash in the filename
         * which changes every compilation.
         *
         * See: https://github.com/ampedandwired/html-webpack-plugin
         */
        new HtmlWebpackPlugin({
            template: './index.html'
        }),

        new ngToolsWebpack.AotPlugin({
            tsConfigPath: helpers.root('tsconfig.json'),
            entryModule: helpers.root('app/app.module#AppModule'),
            mainPath: helpers.root('app/main.ts')
        })

    ]
};

packages:

{
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/animations": "4.0.0",
    "@angular/router": "4.0.0",
    "@angular/flex-layout": "2.0.0-rc.1",
    "@angular/material": "2.0.0-beta.2",
    "core-js": "2.4.1",
    "hammerjs": "2.0.8",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.2.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@types/node": "*",
    "@ngtools/webpack": "1.2.14",
    "codelyzer": "3.0.0-beta.4",
    "css-loader": "0.27.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.10.1",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.28.0",
    "sass-loader": "6.0.3",
    "node-sass": "4.5.1",
    "raw-loader": "0.5.1",
    "rimraf": "2.6.1",
    "style-loader": "0.16.0",
    "typescript": "2.2.1",
    "webpack": "2.3.1",
    "webpack-dev-server": "2.4.2",
    "webpack-merge": "4.1.0"
  }
}

The log given by the failure.

(node:12624) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\Users\jirka\OneDrive\Development\Templates\Angular\Angular\Web\Angular.Web\node_modules\extract-text-webpack-plugin\loader.js:27:9):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

errors at every material2 css file like this:

ERROR in ./~/@angular/material/list/list.css
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.module.exports.pitch (C:\\Development\Templates\Angular\Angular\Web\Angular.Web\node_modules\extract-text-webpack-plugin\loader.js:27:9)Child node_modules\@angular\material\chips\chips.css:

Desired functionality.

@ngtools/webpack plugin AOT compiles successfully and no styles errors are thrown

Mention any other details that might be useful.

running into this error after adding the @ngtools/webpack loader and setting up the Angular's AOT.
No errors when using JIT mode with ts-loader.
The issue has been reported several times at extract-text-plugin #50 but since the plugin is working when not using @ngtools/webpack I feel like its worth to report it here as well.

[filipesilva]

We use ExtractTextPlugin ourselves in the CLI actually, but selectively apply it only to global CSS. You seem to be excluding the app folder to not parse component CSS but you're still getting component CSS from node_modules (e.g. material).

I don't think this is a bug but rather misconfiguration. Maybe there's something we could do to make this less of a pitfall though.

[GeorgeKnap]

Thank you for quick response.
For the webpack configuration I took an inspiration in webpack introduction page although I am using sass preprocessor instead of plain css.

my file structure is more or less by the convention

--+ app
-----+ feature folder
----- app.component.ts
----- app.module.ts
----- app-routing.module.ts
----- main.ts
----- vendor.ts
----- polyfills.ts

--+ styles
----- global.scss

--+ config
----- helpers.js
----- webpack.common.js
----- webpack.dev.js
----- webpack.prod.js

-- package.json
-- tsconfig.json
-- webpack.config.js

Anyway, any configuration hints will be highly appreciated.
George

[filipesilva]

Try doing it the other way around - instead of excluding your app folder, just include your global scss.

[GeorgeKnap]

Right. After dozens of combinations I realized that the ExtractTextWebpackPlugin does not work on node_modules folder and throws these errors when processing material2 css files.
_(ain't that kinda strange when it works like charm whe using JIT compilation?)_

So I have removed this bit considering there is no .css file under global /styles folder

//this rule is  removed
{
                test: /\.css$/,
                exclude: helpers.root('app'),
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },

now - as expected - the webpack complains about missing loader

    ERROR in ./~/@angular/material/slider/slider.css
    Module parse failed: C:\Development\Templates\Angular\Angular\Web\Angular.Web\node_modules\@angular\material\slider\slider.css Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.

I can get a bit further by commenting out the include condition for css files

{
                test: /\.css$/,
                // include: helpers.root('app'),  // <= this part
                loader: 'raw-loader'
            },

as far as I know this pulls the css files "as strings" which is supposed to be good for angular component's styles under app folder. Not sure if it is a good solution for vendor styles but gets me rid of all errors

... well all but one

ERROR in ENOENT: no such file or directory, open 'C:\Development\Templates\Angular\Angular\Web\Angular.Web\app\layout\app.component'
ERROR in ./app/main.ts
Module not found: Error: Can't resolve './../wwwroot/app/app.module.ngfactory' in 'C:\Development\Templates\Angular\Angular\Web\Angular.Web\app'
 @ ./app/main.ts 5:0-75
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

this one looks like another story and will take some more time

[GeorgeKnap]

Here is my web demo code>
https://github.com/GeorgeKnap/ag-web-tempate

[zfanning]

@GeorgeKnap How did you end up resolving this I'm running into the exact same issue

[GeorgeKnap]

this is my working webpack config now. The first one is for app wide styles and the other one for vendor styles:

{
                test: /\.scss$/,
                include: helpers.root('app/styles'),
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('app/styles'),
                use: ['raw-loader', 'sass-loader']
            }

in my main.ts I import app wide sass file from app/styles and vendor.ts imports vendor sass file which imports all node modules styles with ~ prefix like this: @import '~font-awesome/scss/font-awesome.scss';

[PTC-JoshuaMatthews]

Any progress on this? Is there a way to make it work?

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