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

Webpack throwing TypeError: Data must be a string or a buffer in Angular CLI

Recently I got some error unexpectedly while running my Angular-CLI application.

By default you will not get any information about the error which WebPack is throwing. But I will tell you , how you can log the exact error related to your issue. The reason could be different for your scenario.

Navigate to yoursource\node_modules\webpack\lib\dependencies and open HarmonyExportImportedSpecifierDependency.js file and log the import dependency
updateHash(hash) {
super.updateHash(hash);
const hashValue = this.getHashValue(this.importDependency.module);
if (this.importDependency.module != null){
// console.log('Module resource: ', this.importDependency.module.resource);
}else{
console.log('\nFile not found: ', this.importDependency);
}
hash.update(hashValue);
}

In my case I got the module in my application where the issue is.

Hope this helps