Angular 2 throws 'cssText.replace is not a function' when using ExtractTextPlugin

Question

I have two projects: Project A and Project B.

Project A

1. Webpack@2.2.1

2. Extract-text-webpack-plugin@2.0.0-rc.3

3. Angular 2.4.3

Project B

1. Angular 2.4.3

Project B provides a series of modules/components to Project A.

The code is compiled (not bundled) by Project B into a dist folder which then is being used by Project A via npm link.

Right now, with the webpack.common.js settings using the ExtractTextPlugin the browsers throws an Exception:

This exception is being thrown by Angular 2, but only when this plugin is used. I am saying this, because if I load .css extensions using raw-loader everything works fine, but when using ExtractTextPlugin, it just breaks.

VALID

webpack.config.js

module: {
   rules: [
      {
         test: /\.css$/,
         use: [ "raw-loader" ],
      }
   ]
}

Output:

INVALID (using ExtractTextPlugin)

webpack.config.js

module: {
   rules: [
      {
         test: /\.css$/,
         use: ExtractTextPlugin.extract( {
                  fallback: "raw-loader",
                  use: [ "raw-loader" ]
         } )
      }
   }
},
plugins: [
   new ExtractTextPlugin( "[name].css" ),
]

Output:

Exception thrown:

Uncaught TypeError: cssText.replace is not a function
    at extractStyleUrls (http://localhost:8080/vendor.js:75001:52)

Node: 6.2.0 OS: macOS Sierra (10.12.2)

Answer 1

I just ran into this issue because I had a @Component styleUrl that was referencing a valid stylesheet file but the file was empty. Removing the unnecessary styleUrl solved the issue for me.

Answer 2

Check answer in this Webpack SASS build issue, everything compiles fine, then I get a JS error

In addition to the answer you can either use require or you can simply import those .css files on top of your component.ts file.

Like import '../assets/app.css';

Answer 3

Try to add "angular2-template-loader":"^0.6.2" in your dependencies in package.json then exec npm i. This solved my same issue