How to copy JSON files in to your dist folder without create all directory

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

newCopyWebpackPlugin([{
from:'apps/**/*.json',
to:'assets',
flatten:true
}]),

Output

if you didn’t specify flatten = true , all the directory will create in dist folder like below

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'
})
]