Angular 11升级至14后，使用自定义npm包遇Moment.js类型错误求助

问题背景 #

• 从Angular 11迁移至Angular 14的项目，自定义npm包与主应用均依赖Moment.js 2.29.3
• 使用自定义包时控制台抛出错误：ERROR TypeError: (moment__WEBPACK_IMPORTED_MODULE_1___namespace_cache || moment__WEBPACK_IMPORTED_MODULE_1___namespace_cache) is not a function
• 已尝试Angular 13+使用Moment的常见解决方案，但未解决

针对性解决方案 #

1. 统一Moment.js的导入风格 #

确保自定义npm包和主应用中，Moment的导入完全统一为CommonJS风格：

import * as moment from 'moment';

禁止混合使用默认导入（import moment from 'moment'），Angular 14的Webpack打包策略对ES模块与CommonJS模块的兼容性要求更严格，混合导入会触发命名空间缓存异常。

2. 调整自定义包的TypeScript配置 #

在自定义npm包的tsconfig.lib.json中修改compilerOptions：

{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  }
}

开启esModuleInterop和allowSyntheticDefaultImports可让TypeScript更好地兼容CommonJS模块，避免打包时出现模块命名空间混淆。

3. 强制依赖版本统一 #

在主应用的package.json中添加resolutions字段（npm用户需先安装npm-force-resolutions工具），强制所有依赖树中的Moment.js版本统一为2.29.3：

{
  "resolutions": {
    "moment": "2.29.3"
  }
}

执行npm install或yarn install重新安装依赖，确保自定义包与主应用使用完全相同的Moment.js实例，避免多副本模块导致的缓存冲突。

4. 配置Angular CLI允许CommonJS依赖 #

在主应用的angular.json中，找到build配置的options节点，添加allowedCommonJsDependencies：

{
  "build": {
    "options": {
      "allowedCommonJsDependencies": ["moment"]
    }
  }
}

明确告知Angular CLI允许打包CommonJS格式的Moment.js，避免打包过程中对模块进行不兼容转换。

5. 重新构建自定义包 #

修改配置后，执行以下命令重新构建自定义npm包：

ng build your-library-name

更新主应用中对该包的引用（可使用npm link本地测试，或发布新版本后重新安装），确保打包后的模块符合Angular 14的要求。

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