如何在Chrome设备调试中获取Android端NullInjectorError的详细信息

我有一个Ionic Angular项目，在浏览器中运行正常，但在Android设备上会抛出NullInjectorError。为了追溯错误来源，我将Android设备连接到电脑，通过谷歌Chrome的chrome://inspect/#devices进行调试。Chrome中的输出如下：

main.f1c1bc206c0c555f.js:1 ERROR NullInjectorError: R3InjectorError[t -> InjectionToken  -> [object Object] -> Bs -> Bs]: 
  NullInjectorError: No provider for Bs!
    at $i.get (main.f1c1bc206c0c555f.js:1:1172772)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176195)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176195)
    at nn (main.f1c1bc206c0c555f.js:1:1171275)
    at An (main.f1c1bc206c0c555f.js:1:1171352)
    at ir (main.f1c1bc206c0c555f.js:1:1171790)
    at Object.i [as factory] (main.f1c1bc206c0c555f.js:1:1178483)
    at zi.hydrate (main.f1c1bc206c0c555f.js:1:1177523)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176148)
    at nn (main.f1c1bc206c0c555f.js:1:1171275)
handleError @ main.f1c1bc206c0c555f.js:1
polyfills.132a08611f4a15c8.js:1 NullInjectorError: R3InjectorError[t -> InjectionToken  -> [object Object] -> Bs -> Bs]: 
  NullInjectorError: No provider for Bs!
    at $i.get (main.f1c1bc206c0c555f.js:1:1172772)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176195)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176195)
    at nn (main.f1c1bc206c0c555f.js:1:1171275)
    at An (main.f1c1bc206c0c555f.js:1:1171352)
    at ir (main.f1c1bc206c0c555f.js:1:1171790)
    at Object.i [as factory] (main.f1c1bc206c0c555f.js:1:1178483)
    at zi.hydrate (main.f1c1bc206c0c555f.js:1:1177523)
    at zi.get (main.f1c1bc206c0c555f.js:1:1176148)
    at nn (main.f1c1bc206c0c555f.js:1:1171275)

该输出无法告知我具体缺失或配置错误的提供者是什么。我该如何获取开发模式下的详细输出信息？以下是我的main.ts文件内容：

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { IonicModule,isPlatform } from '@ionic/angular';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { browserLocalPersistence, indexedDBLocalPersistence, provideAuth, getAuth } from '@angular/fire/auth';
import { routes } from './app/app-routing.module';
import { AppComponent } from './app/app.component';
import { IonicStorageModule } from '@ionic/storage-angular';
import { ServiceWorkerModule } from '@angular/service-worker';

import { firebaseConfiguration } from './app/config/app.config';

enableProdMode();

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideFirebaseApp(() => initializeApp(firebaseConfiguration)),
    provideAuth(() => {
      const auth = getAuth();
      if (isPlatform('android')) {
        auth.setPersistence(indexedDBLocalPersistence);
      } 
      else {
        auth.setPersistence(browserLocalPersistence);
      }
      return auth;
    }),
    importProvidersFrom(
      IonicModule.forRoot(),
      IonicStorageModule.forRoot(),
      ServiceWorkerModule.register('ngsw-worker.js', {
        enabled: !isPlatform('android'),
      })
    ),
  ],
});

解决方法 #

1. 关闭生产模式，启用开发模式 #

你的代码里调用了enableProdMode()，这会让Angular压缩代码并隐藏真实类名（比如Bs就是混淆后的缩写）。注释掉这行代码，让项目以开发模式运行：

// enableProdMode();

开发模式下，错误信息会显示真实的服务或类名称，直接定位到缺失提供者的对象。

2. 构建Android开发版本 #

不要使用生产构建命令，改用开发模式构建部署：

• 执行ionic cap run android --livereload --open，以开发模式启动应用并开启热重载，方便实时调试；
• 或执行ionic cap build android --debug构建调试版本，再安装到设备上。

3. 优化ServiceWorker配置（可选） #

开发模式下建议关闭ServiceWorker，避免缓存旧代码干扰调试。可以结合Angular的isDevMode()来控制：

// 先导入isDevMode
import { isDevMode } from '@angular/core';

// 在ServiceWorkerModule配置中修改
ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: !isPlatform('android') && !isDevMode(),
})

4. 重新调试 #

完成以上步骤后，再次通过chrome://inspect/#devices连接设备调试，此时错误信息会显示真实的服务名称，你就能明确知道哪个服务未添加到bootstrapApplication的providers数组中，进而补充对应的配置。

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