After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about why this is happening.
The error message reads as follows:
Uncaught Error: [$injector:unpr] Unknown provider: eProvider <- e
This error appears on every CSS file starting with /*!. Furthermore, similar errors are popping up with different CSS styles, like the one shown here:
https://i.sstatic.net/i1BoG.png
Can someone provide guidance on why these JS injector errors are manifesting in CSS files?
The configuration for CSS files in my webpack is as follows;
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: [
{ loader: 'css-loader',
options: {
modules: false,
sourceMap: true}
}}
],
fallback: 'style-loader'
})
},
I am requiring all CSS files together in an entry file using the following method;
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
requireAll(require.context('./../assets/css/', true, /\.css$/));
Could someone kindly highlight what might be wrong with the above configuration?
Update:
I managed to resolve the initial error related to comments in the files by adding
minimize: { discardComments: { removeAll: true }css-loader. However, the second issue with styles still persists.