[Angular] Import TranslateModule in Angular 16

wish366

已于 2023-07-24 22:11:26 修改

阅读量1.5k

点赞数

分类专栏： UI 文章标签：前端 angular

于 2023-07-24 22:10:42 首次发布

本文链接：https://blog.csdn.net/wish366/article/details/131905111

版权

本文介绍了在Angular 16中，由于standalone模式移除了NgModule，如何在main.ts的bootstrapApplication中导入TranslateModule。文章详细阐述了NPM包安装、i18n文件创建、key-value对象配置、TranslateService服务和TranslateModule模块的导入，以及在HTML和组件中使用翻译的方法，并提供了更换语言的步骤和完整源代码，最后展示了测试结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Background

Angular 更新至V16版后，支援 standalone，故移除了 NgModule，而TranslateModule 又要在AppModule中 import，那该如何做呢？

2.NPM packages installation

npm install @ngx-translate/core
npm install @ngx-translate/http-loade

3.Import TranslateModule in bootstrapApplication of main.ts

// import ngx-translate and the http loader
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      NzMessageServiceModule,
      NzDrawerServiceModule,
      NzModalModule