Ionic issue at serve => NullInjectorError: No provider for TranslateService

Question

I created an Ionic 6 project which uses @ngx-translate module as a dependency. When I serve with ionic s , I got a blank page and the following error in the JS console:

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)

Here is my app.module.ts file:

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

and my custom-loader.ts file

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`)) 
  }
}

I don't see where is the issue. It is actually an Ionic subproject in another Ionic project. This is the reason why some modules are called in a../../.. folders.

I hope someone could help me. Thank you !

Edit: Maybe a little more explanation could help. I have actually 2 app.module.ts:

main project: /MainApp/src/app/app.module.ts subproject: /SubApp/stats/src/app/app.module.ts

The subproject purpose is to only to webpack some page from the main project. The app.module.ts I posted is from the subproject.

Answer 1

I finally found the issue. In my Ionic subproject, I had to add the path of my ngx-translate module.

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

In your project folder... in the page module file...import the service and add it to the providers the issue will be fixed..