Ionic Angular: NullInjectorError: R3InjectorError(Pt)[Ze -> de -> de]

Question

I am in the process of updating an Ionic 6 (Angular) project to Ionic 8 (Angular 17) and I get stuck when building the project on this error:

main.js:23 ERROR NullInjectorError: R3InjectorError(Pt)[Ze -> de -> de]: 
  NullInjectorError: No provider for de!
    at Is.get (main.js:23:75445)
    at ho.get (main.js:23:84703)
    at ho.get (main.js:23:84703)
    at ot (main.js:23:73943)
    at Object.lt (main.js:23:74022)
    at ye.#e.ɵfac [as factory] (main.js:1:27503)
    at ho.hydrate (main.js:23:86100)
    at ho.get (main.js:23:84655)
    at Df.get (main.js:23:128437)
    at Yo (main.js:23:94874)
handleError @ main.js:23
main.js:1 NullInjectorError: R3InjectorError(Pt)[Ze -> de -> de]: 
  NullInjectorError: No provider for de!
    at Is.get (main.js:23:75445)
    at ho.get (main.js:23:84703)
    at ho.get (main.js:23:84703)
    at ot (main.js:23:73943)
    at Object.lt (main.js:23:74022)
    at ye.#e.ɵfac [as factory] (main.js:1:27503)
    at ho.hydrate (main.js:23:86100)
    at ho.get (main.js:23:84655)
    at Df.get (main.js:23:128437)
    at Yo (main.js:23:94874)

The error doesn't tell much apart from missing provider.

This is what my app.module.ts looks like:

import { NgModule } from '@angular/core';
import { browserLocalPersistence, provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouteReuseStrategy } from '@angular/router';
import { IonicStorageModule } from '@ionic/storage-angular';
import { Storage } from '@ionic/storage-angular';
import { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { GooglePlus } from '@awesome-cordova-plugins/google-plus/ngx';

import { ModalAbout } from './modals/modal-about/modal-about';
import { ModalChangePassword } from './modals/modal-change-password/modal-change-password';
import { ModalDiscovery } from './modals/modal-discovery/modal-discovery';
import { ModalFilter } from './modals/modal-filter/modal-filter';
import { ModalHistory } from './modals/modal-history/modal-history';
import { ModalLegal } from './modals/modal-legal/modal-legal';
import { ModalStreamRatings } from './modals/modal-stream-ratings/modal-stream-ratings';
import { ModalReportIssue } from './modals/modal-report-issue/modal-report-issue';
import { ModalRequestStream } from './modals/modal-request-stream/modal-request-stream'
import { PopoverRate } from './popovers/popover-rate/popover-rate';

import { CanActivateGuard } from './providers/guards/can-activate.guard';
import { SigninSignupGuard } from './providers/guards/signin-signup.guard';

import { ScrollingModule } from '@angular/cdk/scrolling';

import { firebaseConfig } from './config/firebase.config';

export function translationLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
    provideFirebaseApp( () => initializeApp(firebaseConfig)),
    provideAuth(() => {
      const auth = getAuth();
      auth.setPersistence(browserLocalPersistence);
      return auth;
    }),
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (translationLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: true
    })
  ],
  declarations: [
    AppComponent,
    ModalAbout,
    ModalChangePassword,
    ModalDiscovery,
    ModalFilter,
    ModalHistory,
    ModalLegal,
    ModalReportIssue,
    ModalRequestStream,
    ModalStreamRatings,
    PopoverRate
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    GooglePlus,
    HttpClient,
    MusicControls,
    Storage,
    CanActivateGuard,
    SigninSignupGuard,
    Storage
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I have gone through all imports several times but cannot find anything wrong. Maybe I am overlooking something here?

Answer 1

Turns out I was missing some configuration in my angular.json file:

          "development": {
            "optimization": false,
            "buildOptimizer": false
            },

With that in place, I was able to run in development mode with the command ionic serve -c development.

Ultimately, I found the culprit. It was a missing provider for IonRouterOutlet.