从Angular 8升级到Angular 9后应用无法启动，依赖包解析失败

针对你升级Angular9时遇到的Module not found: Error: Can't resolve '@herodevs/dynamic-component-service'错误，给出以下具体解决建议：

• 升级Hero-Loader到Angular9兼容版本
  Hero-Loader 2.0.1是为Angular8设计的，Angular9的Ivy编译器带来了依赖解析和打包的变化，你需要安装适配Angular9的Hero-Loader版本。Hero-Loader 3.x版本开始支持Angular9+，执行命令：

  npm install @herodevs/hero-loader@^3.0.0
  

  安装完成后重新启动项目检查是否解决报错。

• 手动补充缺失的依赖包
  如果暂时不想升级Hero-Loader主包，可尝试安装与2.0.1版本匹配的@herodevs/dynamic-component-service：

  npm install @herodevs/dynamic-component-service@^2.0.0
  

  注意：此方案可能仍存在Ivy兼容性问题，仅作为临时过渡方案。

• 调整Angular构建配置
  Angular9对CommonJS模块的处理更严格，需在angular.json的构建配置中添加允许的CommonJS依赖：
  在projects -> [你的项目名] -> architect -> build -> options下添加：

  "allowedCommonJsDependencies": [
    "@herodevs/hero-loader",
    "@herodevs/dynamic-component-service"
  ]
  

  保存配置后重新执行ng serve。

• 替换为Angular原生懒加载方案
  若Hero-Loader后续版本维护不足或兼容问题难以解决，建议改用Angular原生能力实现标签页懒加载：

  • 路由懒加载：使用loadChildren配置路由，点击标签时触发路由导航实现模块懒加载
  • 动态组件加载：利用ViewContainerRef和ComponentFactoryResolver（Angular9+可直接使用ViewContainerRef.createComponent）手动加载组件，完全替代第三方包功能，避免依赖兼容问题。

• 清理依赖缓存
  执行以下命令清理缓存并重新安装依赖，排除缓存导致的依赖解析错误：

  rm -rf node_modules package-lock.json
  npm install
  

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