How to trace NullInjectorError which appears in Production environment only

I have an Ionic Angular project which is working fine in the browser (ionic serve -c), but gives a NullInjectorError on Android devices (ionic cap run android).

In order to trace back where the error comes from, I have an Android device connected to the PC and do the inspection with Google Chrome’s chrome://inspect/#devices.

The output in Chrome looks like this:

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)

So this fails to tell me which provider is missing or wrong.
Also, when I try to debug with the command ionic cap run android -l --external the app works perfectly fine without the NullInjector errors. The errors seems to happen only in Production environment.

How can I get the development type of output for this?

This is what the main.ts file looks like:

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 post - 1 participant

Read full topic