Angular 13使用动态导入时出现System is not defined错误如何解决？

• build时模块路径不存在报错：Angular 14及以上版本对@angular/common的包导出路径做了严格限制，动态导入时如果用纯变量拼接路径，webpack/esbuild等打包工具无法提前识别路径范围，会被exports规则拦截判定为非法路径。
• 运行时System未定义报错：新版本Angular已默认移除SystemJS模块加载器的全局集成，你写的declare var System仅能通过Typescript的编译检查，浏览器运行环境中不存在该全局对象，因此触发引用错误。

方案1：使用标准ES动态导入（适合多语言支持的场景） #

替换System.import为原生import()语法，同时给打包工具增加路径识别提示，修改代码如下：

let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
// webpackMode注释告诉webpack将所有locales下的js文件单独拆分为懒加载chunk，构建时不会遗漏
import(/* webpackMode: "lazy", webpackExclude: /\.d\.ts$/ */ `@angular/common/locales/${angularLocale}.js`)
    .then(module => {
        registerLocaleData(module.default);
        NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
            resolve(true);
            abp.ui.clearBusy();
        });
    }, reject);

同步修改angular.json配置，放开locale路径的导入限制：
找到projects > 你的项目名 > architect > build > options节点，添加配置：

"allowedCommonJsDependencies": ["@angular/common/locales"]

方案2：静态映射表预定义导入（适合项目支持语言较少的场景，100%规避打包路径问题） #

提前把项目用到的所有语言对应的导入路径写死为静态路径，打包工具可以直接识别：

// 提前映射所有你项目支持的语言对应的导入函数
const localeImportMap: Record<string, () => Promise<{ default: any }>> = {
  'zh-Hans': () => import('@angular/common/locales/zh-Hans.js'),
  'en': () => import('@angular/common/locales/en.js'),
  'ja': () => import('@angular/common/locales/ja.js'),
  // 其他用到的语言按上面格式补充即可
}

let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
localeImportMap[angularLocale]()
    .then(module => {
        registerLocaleData(module.default);
        NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
            resolve(true);
            abp.ui.clearBusy();
        });
    }, reject);

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