Ionic Angular新建项目移动端空白屏问题求助

问题背景 #

有多年Ionic项目开发经验，近期创建新空白项目时出现异常，具体情况如下：

操作步骤 #

• 卸载并重装全局Ionic和Angular CLI：

  npm i -g @ionic/cli
  npm install -g @angular/cli
  

• 创建Angular类型的空白项目：

  ionic start myApp blank --type=angular
  

问题现象 #

• ionic serve在浏览器运行正常
• 添加Android平台并构建后，模拟器/真机显示空白屏；通过chrome://inspect捕获到错误：

  VM3:812 NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]
  

已尝试的无效方案 #

• 更换Ionic官方不同模板（tabs/sidemenu等），问题依旧
• 尝试降级Angular到16/17版本，构建报错提示需使用Angular 19
• 降级Ionic CLI到6.x版本，问题未解决
• 更换多个Android模拟器及真机测试，均出现空白屏

环境信息 #

• Angular CLI: 19.0.6
• Node.js: v18.20.0
• npm: 10.5.0
• Ionic CLI: 7.2.0
• Java: Java(TM) SE Runtime Environment (build 18.0.1+10-24)

排查与解决建议 #

1. 定位具体依赖注入问题
   修改src/main.ts，在生产模式下保留调试符号，获取完整错误栈：

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
     // 保留调试信息以定位具体服务
     (window as any).__DEV__ = false;
   }
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   重新构建Android包，通过chrome://inspect查看完整错误信息，找到t和Cr对应的实际服务类，检查该服务是否已在模块的providers中注册。

2. 锁定兼容的Ionic与Angular版本
   Ionic 7.x官方兼容Angular 16-18，Angular 19为最新版本存在兼容性风险，执行以下步骤降级：

   • 修改package.json中@ionic/angular版本为^7.8.0
   • 安装兼容的Angular 18.x依赖：

     npm install @angular/cli@18.2.8 @angular/core@18.2.8 @angular/common@18.2.8 @angular/router@18.2.8
     

   • 同步并重新构建：

     npm install
     ionic cap sync android
     ionic cap build android
     

3. 验证Capacitor配置
   检查capacitor.config.ts中webDir配置是否正确：

   import { defineConfig } from '@capacitor/cli';
   
   export default defineConfig({
     appId: 'io.ionic.starter',
     appName: 'myApp',
     webDir: 'www',
     bundledWebRuntime: false
   });
   

   执行ionic cap sync android确保资源同步完整。

4. 清理缓存后重新构建

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   ionic cap clean android
   ionic cap build android
   

内容的提问来源于stack exchange，提问作者Pascal von Flüe