Alexandru Macavei
Alexandru Macavei

Reputation: 55

Issues when updating from Angular 11/AngularJS hybrid to Angular 14/ AngularJS hybrid

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

Answers (0)

Related Questions