Angular 13升级后报错Cannot find module '@angular/common/locales/fr.js'求助

问题原因 #

Angular 13 开始默认使用Webpack 5完成构建，Webpack 5 对动态导入的静态分析规则做了收紧，纯变量拼接的导入路径无法被正确识别打包，同时Angular 13对@angular/common包内的locale文件结构也做了调整，最终导致原有动态导入逻辑失效，Webpack提示找不到对应locale文件。

可行解决方案 #

根据项目使用场景可选以下两种方案：

方案1：可提前枚举所需locale的场景（推荐） #

该方案稳定性最高，不会受构建规则调整影响。

• 首先调整动态导入语法，保留固定路径前缀供Webpack静态分析，同时移除路径后的.js后缀：

return import(`@angular/common/locales/${localeId}`).then((module) => {
    logger.debug("Culture Angular : '" + localeId + "'");
    registerLocaleData(module.default);
}).catch((err) => {
    logger.fatal("culture not defined for angular", err);
});

• 如果调整导入语法后仍打包失败，可以改为预导入所有需要的locale，运行时直接读取：

// 提前导入所有业务需要用到的locale，按需扩展
import * as zhHans from '@angular/common/locales/zh-Hans';
import * as en from '@angular/common/locales/en';
import * as ja from '@angular/common/locales/ja';

const localeResourceMap = {
  'zh-Hans': zhHans,
  'en': en,
  'ja': ja
}

if (localeResourceMap[localeId]) {
  registerLocaleData(localeResourceMap[localeId].default);
  logger.debug("Culture Angular : '" + localeId + "'");
} else {
  logger.fatal("culture not defined for angular");
}

方案2：需要支持任意locale动态加载的场景 #

如果业务需要支持未提前枚举的locale，可以通过调整构建配置实现：

• 打开项目根目录的angular.json，找到对应项目的architect > build > options节点，在assets配置中新增规则，将所有locale文件复制到产包的assets目录：

"assets": [
  // 保留原有assets配置，新增以下规则
  { "glob": "**/*.js", "input": "node_modules/@angular/common/locales", "output": "/assets/locales" }
]

• 修改动态导入路径，从assets目录读取locale文件：

const localeUri = `/assets/locales/${localeId}.js`;
return import(localeUri).then((module) => {
    logger.debug("Culture Angular : '" + localeId + "'");
    registerLocaleData(module.default);
}).catch((err) => {
    logger.fatal("culture not defined for angular", err);
});

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