Angular5中ngx-translate为何加载完整HTTP响应？

我之前也碰到过一模一样的问题，这不是HttpClient本身的bug，而是@ngx-translate/http-loader v2.0.1在Angular 5环境下的适配问题。

为什么会出现这个情况？ #

在Angular 5中，HttpClient默认返回的是解析后的响应体（也就是你期望的JSON对象），但旧版本的TranslateHttpLoader内部可能错误地使用了类似{observe: 'response'}的配置，或者在处理响应时没有正确提取响应体，导致最终传递给TranslateService的是完整的HTTP Response对象，JSON内容被放在了_body属性里。

解决办法：自定义TranslateLoader替代默认的TranslateHttpLoader #

你可以不用TranslateHttpLoader，自己实现一个简单的Loader来正确处理响应体。修改app.module.ts里的HttpLoaderFactory：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export function HttpLoaderFactory(http: HttpClient) {
  return {
    getTranslation: (lang: string): Observable<any> => {
      return http.get(`./assets/i18n/${lang}.json`)
        .map(response => {
          // 兼容可能存在的完整响应对象情况，提取真正的JSON内容
          return response.hasOwnProperty('_body') 
            ? JSON.parse(response['_body']) 
            : response;
        });
    }
  } as TranslateLoader;
}

另一种可选方案：调整依赖版本 #

如果不想自定义Loader，也可以尝试升级@ngx-translate/http-loader到适配Angular 5的兼容版本（比如v2.0.2，需确认版本对应关系），不过我当时用自定义Loader的方案更直接有效。

验证方法 #

修改后，可以在AppComponent里加个测试代码验证效果：

constructor(private translate: TranslateService) {
  translate.addLangs(["en", "nb"]);
  translate.setDefaultLang('en');
  
  // 测试获取翻译内容
  translate.get('test.key').subscribe(value => {
    console.log(value); // 现在应该直接输出对应的翻译文本，而不是完整响应对象
  });
}

这样就能解决TranslateService拿到完整HTTP响应的问题了！

内容的提问来源于stack exchange，提问作者Remi Sture