Reputation: 55
We are using @angular-builders/custom-webpack in our angular.json file in order to allow a custom webpack config extension. I know that in Angular 12, preprocessing has switched to Webpack 5.
Here is my extend-webpack.config.js file that has worked just fine up to Angular 11:
const path = require('path');
const webpack = require('webpack');
module.exports = (config) => {
config.plugins.push(new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}));
config.module.rules.filter(rule => rule.test.test('.scss'))[0].exclude.push(path.resolve(__dirname, 'src/app/angularjs'));
config.module.rules.unshift({
include: path.resolve(__dirname, 'src/app/angularjs'),
test: /\.(js|ts)$/,
loader: 'babel-loader',
exclude: /node_modules/
});
config.module.rules.push(
{
test: /\.html$/,
use: ['raw-loader']
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}
);
return config;
};
The same snippet fails in Angular 14, given the changes to the structure of that config object. The config.module.rules.filter(rule => rule.test.test('.scss'))[0]
exists, but does not contain an exclude array anymore. I have tried changing to config.module.rules.filter(rule => rule.test.test('.scss'))[0].exclude = [path.resolve(__dirname, 'src/app/angularjs')];
but now there are no loaders to process my AngularJS scss files. So getting a gazillion errors like:
/src/app/angularjs/some/path/lpSomeComponent.scss:1:0 - Error: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "theme/constants";
| @import 'theme/custom-scrollbar';
| @import 'theme/styles/typography/typography-mixins';
Any ideas? :(
Upvotes: 1
Views: 108