离子角度：NullInjectorError：R3InjectorError（Pt）[Ze -> de -> de]

Question

我正在将 Ionic 6 (Angular) 项目更新到 Ionic 8 (Angular 17)，并且在构建项目时遇到此错误：

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)

除了缺少提供商之外，该错误并不能说明太多问题。

这就是我的

app.module.ts

的样子：

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 {}

我已经多次检查了所有导入，但没有发现任何错误。也许我在这里忽略了一些东西？

Answer 1

尝试这个改变。这基本上将两个提供者从

imports

移动到

providers

数组。这可能会解决问题。

运行

ng serve -c development

将运行本地服务器，无需对源代码进行任何优化/缩小。这将有助于缩小错误范围。此外，您还可以修改

angular.json

以使用

development

配置作为

ng serve

的默认配置。您可以在这里阅读相关内容。

@NgModule({
  imports: [
    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,
    provideFirebaseApp( () => initializeApp(firebaseConfig)),
    provideAuth(() => {
      const auth = getAuth();
      auth.setPersistence(browserLocalPersistence);
      return auth;
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}