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
My issue was little bit different , typescript is not resolving decorator> To fix the issue I have set emitDecoratorMetadata=true in tsconfig.json file
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