Can’t resolve all parameters in Angular and Webpack

I have recently faced an issue while configuring an Angular 6 application using Webpack 4 , All the dependencies I am injecting in to the component are throwing error.

This error will throw because of various reasons such as circular dependency , not properly spelled @Injectable() decorator etc. You can check the scenarios in the below link
https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters

My issue was little bit different , typescript is not resolving decorator> To fix the issue I have set emitDecoratorMetadata=true in tsconfig.json file

Load Angular component styleUrl using web pack

The only change you have to make on your component is , instead of providing the url path using styleUrl , import the file using require and convert to string.


To get the require keyword in typescript, you have to install an npm package called ‘@types/node’
npm install @types/node --save-dev

Also if you want to build and load the scss make sure that you have installed sass-loader and style-loader for web pack

npm install sass-loader --save-dev
npm install style-loader --save-dev

Plugins for webpack

npm install mini-css-extract-plugin --save-dev

webpack-config

rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
}]


plugins: [

new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({

filename: '[name].styles.css',
chunkFilename: '[name].styles.css'
})
]