服务时的离子问题 => NullInjectorError：没有 TranslateService 的提供者

Question

我创建了一个 Ionic 6 项目，它使用 @ngx-translate 模块作为依赖项。当我使用

ionic s

服务时，我得到了一个空白页面，并且 JS 控制台中出现以下错误：

core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[TranslateService -> TranslateService -> TranslateService]: 
  NullInjectorError: No provider for TranslateService!
NullInjectorError: R3InjectorError(AppModule)[TranslateService -> TranslateService -> TranslateService]: 
  NullInjectorError: No provider for TranslateService!
    at NullInjector.get (core.mjs:11120:1)
    at R3Injector.get (core.mjs:11287:1)
    at R3Injector.get (core.mjs:11287:1)
    at R3Injector.get (core.mjs:11287:1)
    at NgModuleRef.get (core.mjs:21840:1)
    at Object.get (core.mjs:21517:1)
    at lookupTokenUsingModuleInjector (core.mjs:3358:1)
    at getOrCreateInjectable (core.mjs:3470:1)
    at ɵɵdirectiveInject (core.mjs:14396:1)
    at NodeInjectorFactory.StatsPage_Factory [as factory] (ɵfac.js? [sm]:1:1)
    at resolvePromise (zone.js:1255:1)
    at resolvePromise (zone.js:1209:1)
    at zone.js:1321:1
    at ZoneDelegate.invokeTask (zone.js:434:1)
    at Object.onInvokeTask (core.mjs:25505:1)
    at ZoneDelegate.invokeTask (zone.js:433:1)
    at Zone.runTask (zone.js:205:1)
    at drainMicroTaskQueue (zone.js:620:1)

这是我的

app.module.ts

文件：

import { HelpPageModule } from './../../../src/app/help/help.module';
import { ApplicationModule, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpService } from '../../../src/app/services/http.service';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { StatsPageModule } from '../../../src/app/stats/stats.module'
import { SettingsStatsPageModule } from '../../../src/app/settings-stats/settings-stats.module';
import { ExportCsvPageModule } from '../../../src/app/export-csv/export-csv.module';
import { BrowseAssetsPageModule } from '../../../src/app/browse-assets/browse-assets.module';
import { AssetsFilteredPageModule } from '../../../src/app/assets-filtered/assets-filtered.module';
import { ExportHtmlPageModule } from '../../../src/app/export-html/export-html.module';

import { CustomLoader } from './custom-loader';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicModule.forRoot(), 
    AppRoutingModule, 
    HttpClientModule,
    CommonModule,
    ApplicationModule,
    BrowserModule, 
    AppRoutingModule,
        HttpClientModule,
    NgxDatatableModule,
    StatsPageModule,
    SettingsStatsPageModule,
    ExportCsvPageModule,
    BrowseAssetsPageModule,
    AssetsFilteredPageModule,
    ExportCsvPageModule,
    ExportHtmlPageModule,
    HelpPageModule, 
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useClass: CustomLoader,
      }
    }),
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpService ,
      multi: true
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

和我的

custom-loader.ts

文件

import { Observable, of } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';

declare var require: any;

export class CustomLoader implements TranslateLoader {
  constructor() {}

  getTranslation(lang: string): Observable<any> {
    // L'utilisation de require permet à webpack d'intégrer le JSON dans les fichiers JS.
    return of(require(`../../../src/assets/i18n/${lang}.json`)) 
  }
}

我不明白问题出在哪里。它实际上是另一个 Ionic 项目中的一个 Ionic 子项目。这就是为什么某些模块在 ../../.. 文件夹中被调用的原因。

我希望有人能帮助我。谢谢你！

编辑： 也许更多的解释会有所帮助。 我实际上有 2 个 app.module.ts:

主项目：/MainApp/src/app/app.module.ts 子项目：/SubApp/stats/src/app/app.module.ts

子项目的目的是仅对主项目中的某些页面进行 webpack。 我发布的app.module.ts来自子项目。

Answer 1

我终于找到问题了。在我的 Ionic 子项目中，我必须添加 ngx-translate 模块的路径。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "paths": { 
      "@angular/*": [ "../node_modules/@angular/*" ],
      "@ngx-translate/*": [ "../node_modules/@ngx-translate/*" ] 

    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
}

Answer 2

在您的项目文件夹中...在页面模块文件中...导入服务并将其添加到提供程序中，问题将得到解决..

Answer 3

对于新版本的IONIC

打开 main.ts 文件并在提供者下添加：