ngx-translate：不加载模块的单独翻译文件

Question

我目前正在尝试为 NgRx 项目中的 Angular 模块翻译。对于翻译，我使用的是 ngx-translate，整个项目基于名为 "Angular NgRx Material Starter".

的模板

但是，目前我面临的问题是我创建了一个名为“setup”的新模块，该模块应使用来自 /assets/i18n/setup 目录的单独翻译。要在该模块中创建新模块和组件，我使用了 Angular CLI。

不幸的是，当我访问“设置”模块中的“设备”组件时，翻译文件没有加载，所以页面只显示翻译文件中字符串的键。为了说明问题，我创建了一个非常简单的示例来重现基本模板的行为。由于我完全被困在这里，非常感谢任何帮助。

这是一个包含完整项目的 ZIP 文件：ngx-translate problem

有什么想法吗？

core.module.ts:（开头加载一次），主要翻译加载：

export {
  ...
};

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

@NgModule({
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [],
  providers: [
    ...
  ],
  exports: [
    ...
    TranslateModule
  ]
})
export class CoreModule {
  ...
}

shared.module.ts：“共享”模块只是导入和导出 TranslationModule：

@NgModule({
  imports: [
    ...
    TranslateModule,
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
    ...
    TranslateModule,
    ...
  ]
})
export class SharedModule {
  ...
}

setup.module.ts: “设置”模块如下所示：

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

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

devices.component.ts/.html：这是“设备”组件：

@Component({
  selector: 'anms-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevicesComponent implements OnInit {

  constructor(private translate: TranslateService) { }

  ngOnInit(): void {
  }

}

<p>devices works!</p>
<h1>{{ 'setup.translation.test' | translate }}</h1>

setup-routing.module.ts: “设置”路由模块：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'devices',
    pathMatch: 'full'
  },
  {
    path: 'devices',
    component: DevicesComponent,
    data: { title: 'ecue.setup.devices.title' }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SetupRoutingModule { }

Answer 1

好的，我找到了问题的答案，而且很简单（也可能太明显了）。在新创建的模块中，我创建了一个效果，它将在子模块的翻译服务中设置语言：

setTranslateServiceLanguage = createEffect(
() => () =>
  this.store.pipe(
    select(selectSettingsLanguage),
    distinctUntilChanged(),
    tap((language) => this.translateService.use(language))
  ),
 { dispatch: false }
);

ngx-translate：不加载模块的单独翻译文件

ngx-translate: Separate translation file for module does not load

internationalization

ngrx

ngx-translate

angular