Angular 2: how to import your css file with Webpack without errors

According to the Angular documentation load an external style file in a component is as easy as :

        <hero-team [hero]=hero></hero-team> 
styleUrls: ['app/hero-details.component.css'] 

This configuration is challenging when you have building process that include Webpack. In our reference example application the call of the css file using styleUrl

    selector: 'cv-experience', 

resulted in this error:

{'Uncaught Error: Expected 'styles' to be an array of strings. at assertArrayOfStrings (eval at <anonymous> '}

To solve the issue we had to migrate from Webpack 1.x to the new version 2 and call the css file with the following code:

        selector: 'cv-experience', 

This is the loader of Webpack

    { test: /\.css$/, loader: "style-loader!css-loader" }, 
    { test: /\.scss$/,loaders: ['style', 'css', 'postcss', 'sass'] } 

Super fast WebApp built by Marco using SpringBoot 3 and Java 17 hosted in Switzerland