Angular 5 Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

Question

I have this error when compiling.

ERROR in ./src/app/app.component.css Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webp ack-plugin for the usage example at Object.pitch (C:\Users\Flamelsoft\source\repos\Ecommerce\Ecommerce\node_m odules\extract-text-webpack-plugin\dist\loader.js:57:11)

My code webpack.config.js is:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, 'src/main.ts'),
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:63995',
                secure: false
            }
        }
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot'),
        filename: 'app.[hash].js'
    },
    module: {
        rules: [
            { test: /\.component.ts$/, loaders: 'angular2-template-loader' },
            { test: /\.ts$/, loaders: 'awesome-typescript-loader' },
            { test: /\.html$/, loaders: 'html-loader' },
            { test: /\.css$/, loaders: 'css-loader' },
            { test: /\.css$/, loaders: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.ts', '.html', '.css']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

I'm using:

 "devDependencies": {
    "@types/node": "~8.9.4",
    "angular2-template-loader": "~0.6.2",
    "awesome-typescript-loader": "~3.5.0",
    "copy-webpack-plugin": "~4.4.2",
    "css-loader": "~0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "~1.1.9",
    "html-elements-webpack-plugin": "~1.0.1",
    "html-loader": "~0.5.5",
    "html-webpack-plugin": "~2.30.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "style-loader": "~0.20.2",
    "to-string-loader": "~1.1.5",
    "ts-loader": "~3.5.0",
    "typescript": "~2.7.2",
    "url-loader": "~0.6.2",
    "webpack": "~3.11.0",
    "webpack-dev-server": "~2.11.1"
  }

Any solution ?, I would really appreciate it

Answer 1

The resolution is the same what the error message is saying:

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin() // <-------------
    ]