Angular i18n的技術分享、踩過的坑

1.安裝

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader　

2.配置（文本背景部分為該模塊新增的）~app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { I18nComponent } from './i18n.component'

import { HttpClientModule ,HttpClient} from '@angular/common/http';

export function createTranslateHttpLoader(http: HttpClient) {

return new TranslateHttpLoader(http, '/app/assets/i18n/', '.json');

}

 

imports: [

　　　　BrowserModule,

　　　　FormsModule, // <-- import the FormsModule before binding with [(ngModel)]

　　　　ReactiveFormsModule,

　　　　AppRoutingModule,//路由模塊

　　　　CommonModule,

　　　　FileUploadModule,

　　 　　HttpClientModule,

　　　　TranslateModule.forRoot({

　　　　　　　　loader: {

　　　　　　　　　　　　　　provide: TranslateLoader,

　　　　　　　　　　　　　　useFactory: (createTranslateHttpLoader),

　　　　　　　　　　　　　　deps: [HttpClient]

　　　　　　　　　　　　}

　　　　　　　　})

　　　　　　],

3.組件部分(i18n.component.ts)

import { Component, OnInit } from '@angular/core';

import { TranslateService } from '@ngx-translate/core'

@Component({

moduleId: module.id,

selector: 'my-app',

templateUrl: 'i18n.component.html'

})

export class I18nComponent implements OnInit {

constructor(private translateService: TranslateService) {

}

ngOnInit() {

　　　　this.translateService.addLangs(["ch", "en"]);

　　　　this.translateService.setDefaultLang("ch");

　　　　const browserLang = this.translateService.getBrowserLang();

　　　　this.translateService.use(browserLang.match(/ch|en/) ? browserLang : 'ch');

　　　　}

}

 

4.i18n.component.html

<div>

<span> hello dih</span>

<h1>{{ 'hello' | translate }}</h1>

</div>

 

5.創建需要翻譯的json語言 （注意：該路徑是app.module中的調用的路徑）

 

en.json

{

"hello": "the word is hello"

}

ch.json

{

"hello": "你好"

}

 

 

通過以上配置即可完成i18n國際化語言的轉化，但是還有些坑需要自己踩。。。。

以下是通過自己的實戰經驗解決的問題，也許能幫助大家，往下看

1.bug1  (GET http://localhost:3000/@ngx-translate/core 404 (Not Found))

解決方案如下：

1. 需要在systemjs.config.js中添加

'@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',

'@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',

 

2.bu2(http 404 (Not Found))

解決方案如下：

1.在app.module.ts中把http換成HttpClient，上面的已經修改后的

2.需要在systemjs.config.js中添加@angular/common/http

3.bug3 (tslib 404 not found)

解決方案如下：

 

1.在systemjs.config.js中添加以下配置

path:新增'npm:': 'https://unpkg.com/'

map新增'tslib': 'npm:tslib@1.6.1'

 

 通過以上配置，即可根據瀏覽器語言設置來加載國際化語言了

英文如下：

中文如下：

 

 

 谷歌瀏覽器~高級~語言~移動頂部~保存~刷新F5~語言