Angular 14升级至15后执行ng serve报"Module parse failed"问题排查

我正尝试将Angular v14升级至v15，当前是Angular与AngularJS的混合应用，仅剩少量AngularJS组件待重构。v14版本时曾遇到相同错误，当时通过在angular.json的"styles"字段中配置相关.scss文件路径解决，但升级到Angular 15后问题复现，原方法不再生效。

我们使用了Angular Builders - Custom Webpack，配置如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            { test: /\.html$/, use: { loader: 'raw-loader' } },
        ],
    }
};

报错信息：Uncaught ReferenceError: angular is not defined

可行解决方案 #

• 调整依赖加载顺序：Angular 15优化了构建流程，可能改变了资源加载优先级。在angular.json的"scripts"字段中明确添加AngularJS核心脚本路径，确保它在AngularJS组件的样式、脚本之前加载。
• 适配Webpack配置：Angular 15基于Webpack 5，原raw-loader可能存在兼容问题。要么升级raw-loader到支持Webpack 5的版本，要么替换为Angular官方提供的raw-loader：@angular-devkit/build-angular/src/webpack/loaders/raw-loader.js。
• 变更全局样式引入方式：放弃angular.json中"styles"的配置，改为在根组件的样式文件（如app.component.scss）中通过@import引入相关.scss文件，确保样式加载时AngularJS环境已初始化完成。
• 检查混合应用初始化逻辑：确认使用UpgradeModule时，AngularJS的bootstrap操作在Angular初始化之后执行，保证两个框架的上下文正确关联，避免出现依赖未定义的错误。

内容的提问来源于stack exchange，提问作者Emilija