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'),
})
),
],
});
