升级Angular 18.1与Ionic 8后，ion-app构造函数缺失及组件加载失败

将Ionic v7/Angular 16应用升级至Ionic v8/Angular v18后，编译正常但运行时无法加载任何Ionic组件。查看<app>\.angular\cache\18.1.1\vite\deps目录，未发现以Ion开头的文件。

环境信息 #

$ ionic info
 Ionic:

   Ionic CLI                     : 7.2.0 (C:\Users\peter\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 8.2.5
   @angular-devkit/build-angular : 18.1.1
   @angular-devkit/schematics    : 18.1.1
   @angular/cli                  : 18.1.1
   @ionic/angular-toolkit        : 11.0.1

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 13.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 13 other plugins)

Utility:

   cordova-res : 0.15.4
   native-run  : not installed globally

System:

   NodeJS : v20.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 10.7.0
   OS     : Windows 10

补充警告信息 #

[ng] 应用包生成完成。[4.600秒]
[ng] 已启用监听模式，正在监听文件变更...
[ng] 注意：原始文件大小不反映开发服务器的每个请求转换结果。
[ng] 因锁文件变更，正在重新优化依赖
[ng]   ➜  本地:   http://127.0.0.1:8100/
[ng]   ➜  按 h + 回车键显示帮助
[ng] 上午8:02:56 [vite] 警告: 
[ng] C:/dev/my-app/.angular/cache/18.1.1/vite/deps/chunk-GQGXXH53.js
[ng] 900|      return i[n];
[ng] 901|    }
[ng] 902|    return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {
[ng]    |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[ng] 903|      {
[ng] 904|        cmpModules.set(a, e2);
[ng] 支持的动态导入格式请参考相关规则。如果有意保留当前写法，可以在import()调用内添加/* @vite-ignore */注释来抑制此警告。
[ng]
[ng]   插件: vite:import-analysis
[ng]   文件: C:/dev/my-app/.angular/cache/18.1.1/vite/deps/chunk-GQGXXH53.js?v=e850c948
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-app_8.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-menu_3.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-item_8.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-loading.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-app_8.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-menu_3.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-item_8.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。
[ng] 文件不存在于优化依赖目录："C:/dev/my-app/.angular/cache/18.1.1/vite/deps/ion-loading.entry.js"。该依赖可能与依赖优化器不兼容，请尝试将其添加到`optimizeDeps.exclude`。

排查与解决步骤 #

1. 排除Ionic组件的Vite依赖优化 #

根据警告提示，Ionic组件与Vite的依赖优化器不兼容，需将其加入排除列表：

• 打开项目根目录的angular.json，找到对应项目的architect > build > options节点，添加Vite配置：

"options": {
  // 原有配置
  "vite": {
    "optimizeDeps": {
      "exclude": [
        "@ionic/angular",
        "@ionic/core"
      ]
    }
  }
}

• 若项目使用独立的vite.config.ts，则修改该文件：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite-plugin';

export default defineConfig({
  plugins: [angular()],
  optimizeDeps: {
    exclude: ['@ionic/angular', '@ionic/core']
  }
});

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

旧缓存可能导致版本冲突，执行以下步骤：

• 删除项目根目录的.angular/cache文件夹
• 删除node_modules文件夹和package-lock.json文件
• 运行npm install重新安装依赖
• 启动应用时添加--no-cache参数：ionic serve --no-cache

3. 检查Ionic模块的导入配置 #

• 独立组件模式（Angular 18默认）：确保在main.ts中正确导入Ionic的提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    provideIonicAngular(),
    // 其他应用提供者
  ]
});

• NgModule模式：确保AppModule中正确导入IonicModule.forRoot()：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 升级Ionic CLI版本 #

当前使用的Ionic CLI 7.2.0与Ionic Framework 8.2.5版本不匹配，升级CLI：

npm install -g @ionic/cli@latest

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