Version : Webpack 4
You can use copy-webpack-plugin to copy files or directory from your source directory to dist folder.
For example I am going to copy all JSON files from inside the app folder to dist/assets/ folder
if you didn’t specify flatten = true , all the directory will create in dist folder like below
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