执行npm run ionic:build --prod时遇模块识别错误求助

我之前在Ionic项目执行生产构建时也碰到过一模一样的错误，给你几个经过验证的解决思路：

1. 手动在NgModule中声明缺失的组件 #

错误提示已经明确指出问题所在——构建工具无法找到这两个组件所属的模块，我们只需要在主模块中手动导入并声明它们即可：

打开你的src/app/app.module.ts文件，按以下步骤修改：

• 首先从ionic-angular导入这两个组件：

  import { IonicApp, OverlayPortal } from 'ionic-angular';
  

• 然后将它们添加到@NgModule的declarations和entryComponents数组中（Ionic 3及以下版本需要添加到entryComponents，Ionic 4+可能不需要，但加上也不会有问题）：

  @NgModule({
    declarations: [
      MyApp,
      // ...你的其他自定义组件/页面
      IonicApp,
      OverlayPortal
    ],
    entryComponents: [
      MyApp,
      // ...你的其他自定义组件/页面
      IonicApp,
      OverlayPortal
    ],
    imports: [
      BrowserModule,
      IonicModule.forRoot(MyApp)
      // ...其他已导入的模块
    ],
    bootstrap: [IonicApp],
    providers: [
      // ...你的服务提供者
    ]
  })
  export class AppModule {}
  

2. 清理缓存并重新安装依赖 #

有时候npm缓存或者损坏的依赖包会导致这类奇怪的构建错误，执行以下命令彻底清理后重新构建：

# 清理npm缓存
npm cache clean --force
# 删除node_modules文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install
# 再次尝试生产构建
npm run ionic:build --prod

3. 检查版本兼容性 #

如果上述方法都无效，可能是你的Ionic和Angular版本不匹配导致的。打开package.json文件，确认ionic-angular和@angular/core的版本是否兼容：

• Ionic 3.x 对应 Angular 5.x
• Ionic 4.x 对应 Angular 8.x
• Ionic 5.x 对应 Angular 10.x

如果版本不匹配，升级或降级到对应的兼容版本后再尝试构建。

4. 清理构建产物后重试 #

最后可以尝试删除www文件夹（Ionic的构建输出目录），然后重新执行构建命令，避免旧的构建产物干扰：

rm -rf www
npm run ionic:build --prod

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