Problem using translation in a separate module

[Octoate]

Hi,
first of all, thank you very much for the great starter template. It really helped me to get into NgRx.
However, I have the problem that I have created a new module under "features" called "setup" which contains a component called "devices". I also want to use a separate translation file for the "setup" module that is located under "assets/i18n/setup".

Unfortunately the translation does not work. If I change the "isolate" property in the SetupModule I can use the root translation, but it does not load the module translation (it also does not try to load it via the webbrowser).
It works if I set the defaultLanguage in the module.

I already tried a lot of things but made no progress. Any ideas what to change to get it working or where to look?

This is my setup module:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { LazyElementsModule } from '@angular-extensions/elements';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { environment } from '../../../environments/environment';
import { SharedModule } from '../../shared/shared.module';

import { FEATURE_NAME, reducers } from './setup.state';
import { SetupRoutingModule } from './setup-routing.module';
import { DevicesComponent } from './devices/devices.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(
    http,
    `${environment.i18nPrefix}/assets/i18n/setup/`,
    '.json'
  );
}

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    LazyElementsModule,
    SharedModule,
    SetupRoutingModule,
    StoreModule.forFeature(FEATURE_NAME, reducers),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (httpLoaderFactory),
        deps: [HttpClient]
      },
      isolate: true
    }),
    EffectsModule.forFeature([
      /* UserSettingsEffects, LoginEffects */
    ])
  ],
  declarations: [DevicesComponent]
})
export class SetupModule {}

This is my component:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';

import {
  NotificationService,
  ROUTE_ANIMATIONS_ELEMENTS
} from '../../../core/core.module';

@Component({
  selector: 'app-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevicesComponent implements OnInit {
  routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
  testTranslation: string;
  getState: Observable<any>;
  constructor(
    private store: Store,
    private translate: TranslateService,
    private notificationService: NotificationService
  ) {}

  ngOnInit(): void {
    this.testTranslation =
      this.translate.instant('app.setup.title') + ' class';
  }
}

[Octoate]

I was just able to reproduce it with a clean starter template. I just added a new module under 'features' called 'setup' and put a component 'devices' in it. The result is attached below.

angular-ngrx-material-starter-master.zip

[thankikaushik]

@Octoate any luck with solution ?

[millbj92]

The translator supports multiple plugins that are mostly pre-written loaders. I think the one you'd be most interested in is here

From what I've read, which isn't much, it seems to me that whatever loader is loaded first (in this case the one in core module) is treated as a singleton and will not be overwritten.