Angular 10升级报错：无法从非ES模块导入命名导出

问题场景 #

将遗留应用升级到Angular 10.2.5，完成依赖安装后执行npm start，触发一系列同类错误，核心提示：

Can't import the named export 'XXX' from non EcmaScript module (only default export is available)

涉及ngx-slick-carousel的fesm2015模块导入CommonModule、Component、Directive等Angular核心模块时触发。当前环境：Node 16.9.1、TypeScript 4.0.8、ngx-slick-carousel 0.6.0（官方标注适配Angular 10），调整tsconfig的target为es5/es2015均无效，项目无webpack.config.ts文件。

解决方案 #

方案1：配置自定义Webpack规则处理.mjs文件 #

1. 安装自定义Webpack构建依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录新建webpack.config.js，添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
};

3. 修改angular.json的构建配置：
   • 找到projects -> [你的项目名称] -> architect -> build，替换builder并添加自定义配置：

     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留原有其他配置
     }
     

   • 同样修改serve部分的builder：

     "builder": "@angular-builders/custom-webpack:dev-server",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留原有其他配置
     }
     

4. 重新执行npm start启动应用。

方案2：调整TypeScript编译配置 #

在tsconfig.json的compilerOptions中添加/修改：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // 保留原有其他配置
  }
}

该配置允许TypeScript兼容非ES模块的导入方式，保存后重启服务验证。

方案3：更换ngx-slick-carousel版本 #

若上述方案无效，尝试降级到更适配Angular 10的版本：

npm uninstall ngx-slick-carousel
npm install ngx-slick-carousel@0.5.1 --save

重新安装后启动应用测试。

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