Angular 8库动态导入失效，构建触发Rollup输出配置错误

这个问题我之前帮团队排查过，本质是动态导入触发了Rollup的代码拆分（多chunk生成），但默认的ng-packagr配置还是沿用了单chunk的输出设置，导致规则冲突。下面给你一步步解决的方法：

问题根源 #

当你的Angular库中使用import('./lazy/lazy.module').then(...)这类动态导入语法时，Rollup会自动把懒加载模块拆分成独立的chunk文件。而Rollup的核心规则是：如果要生成多个chunk，必须通过output.dir指定输出目录，不能用output.file指定单个输出文件——这就是报错的核心原因。

解决方案步骤 #

1. 修改ng-package.json，引入自定义Rollup配置 #

打开项目根目录的ng-package.json，添加rollupConfig字段指向自定义的Rollup配置文件：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "rollupConfig": "./rollup.config.lib.js"
}

2. 创建自定义Rollup配置文件 #

在项目根目录新建rollup.config.lib.js，继承ng-packagr的默认配置，同时覆盖output选项为指定目录：

// 导入ng-packagr的默认Rollup配置
import ngPackagrDefaultConfig from 'ng-packagr/lib/ng-package/rollup.config';

export default {
  ...ngPackagrDefaultConfig,
  output: {
    ...ngPackagrDefaultConfig.output,
    // 替换output.file为output.dir，指定输出目录
    dir: './dist/your-library-name',
    // 保持原有输出格式，比如esm（Angular库常用格式）
    format: 'esm'
  }
};

3. 重新构建库 #

执行构建命令：

ng build your-library-name

这时候Rollup会把拆分后的多个chunk文件输出到你指定的dist/your-library-name目录下，不会再触发报错。

额外注意事项 #

• 确保你的库的package.json中，main、module等入口字段指向dist目录下的正确文件（比如dist/your-library-name/index.js）
• 如果你的库需要支持多种输出格式（比如umd、esm），可以在output中配置多个格式对应的目录，或者保持格式一致避免额外问题

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