Ionic 6升级至Ionic 8(Angular17)遇NullInjectorError问题求助

第一步：获取清晰的错误信息 #

当前错误是生产构建压缩后的混淆代码（de、Ze为变量别名），无法定位具体依赖。先运行开发模式查看原始错误：

ng serve

或在生产构建时开启sourceMap，通过浏览器开发者工具的sourceMap映射找到真实的依赖名称。

第二步：修复AppModule中的明显错误 #

1. 修正Firebase提供者的位置 #

你错误地将AngularFire的provideFirebaseApp和provideAuth放在了imports数组中，这些是提供者配置函数，必须移到providers数组里。

2. 移除冗余/重复的提供者 #

• HttpClient无需手动添加到providers，HttpClientModule已自动提供该服务
• Storage被重复添加，且IonicStorageModule.forRoot()已自动注册Storage服务，直接移除providers中的所有Storage项

修复后的AppModule代码 #

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { firebaseConfig } from './config/firebase.config';

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';

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

@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,
    MusicControls,
    CanActivateGuard,
    SigninSignupGuard,
    // 修正位置的Firebase提供者
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAuth(() => {
      const auth = getAuth();
      auth.setPersistence(browserLocalPersistence);
      return auth;
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

第三步：检查依赖版本兼容性 #

确保所有依赖包适配Angular 17和Ionic 8：

• 升级@angular/fire到适配Angular 17的版本
• 升级@awesome-cordova-plugins到最新版本，确保支持Angular 17
• 升级@ngx-translate/core和@ngx-translate/http-loader到适配Angular 17的版本

第四步：排查其他潜在问题 #

• 检查自定义守卫（CanActivateGuard、SigninSignupGuard）的构造函数，确认注入的所有服务都已正确提供
• 检查模态框、Popover等组件的构造函数，是否注入了未在模块中注册的服务

内容的提问来源于stack exchange，提问作者NorthFred