如何在 Chrome 的 Inspect Devices 中获取 Android 的 NullInjectorError 信息

Question

我有一个 Ionic Angular 项目，它在浏览器中运行良好，但在 Android 设备上给出了

NullInjectorError

。

为了追溯错误的来源，我将Android设备连接到PC并使用Google 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'),
      })
    ),
  ],
});

Answer 1

a.在main.ts中注释掉enableProdMode()以查看详细的错误消息。 b.检查 Bs 注入的位置并确保将其添加到providers数组中。 c.如果 Bs 是第三方库的一部分，则导入并配置所需的模块。 d.验证 isPlatform('android') 的特定于平台的配置是否有效。 e.通过在 build > options 下设置 "sourceMap": true 来启用 angular.json 中的源映射。 f.确保 package.json 中的 Ionic 和 Angular 版本兼容。 g。使用 npm outdated 来识别版本不匹配或所需的更新。 h.通过 chrome://inspect/#devices 重新构建项目并使用 Chrome DevTools 进行调试