Ng2-翻译和Webpack

时间:2018-10-19 15:58:58

标签: android ios internationalization nativescript ng2-translate

下午好,我正在使用ng2-translate进行应用程序的翻译,并使用以下命令完美运行:tns run ios |安卓系统 但是使用以下参数运行webpack时出现错误:tns运行ios --bundle --env.uglify --env.aot

    Error:
    CONSOLE LOG file:///app/vendor.js:1:1200993:
    CONSOLE ERROR file:///app/vendor.js:1:28276: ERROR TypeError: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
    CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: ERROR BOOTSTRAPPING ANGULAR
    CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
    getTranslation@file:///app/vendor.js:1:886381
    getTranslation@file:///app/vendor.js:1:887491
    retrieveTranslations@file:///app/vendor.js:1:887380
    setDefaultLang@file:///app/vendor.js:1:886824
    n@file:///app/bundle.js:1:88782
    ka@file:///app/vendor.js:1:110925

要测试的存储库:https://github.com/gustavost26/teste-ng2-translate

1 个答案:

答案 0 :(得分:0)

很好,您提供了一个示例项目,我能够快速查看它,看起来您使用的是Angular和rxjs的最新版本,但是您的翻译模块已完全过时。

用重构后的同一软件包的最新版本替换它

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

更新了 app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { ItemService } from "./pages/item/item.service";
import { ItemsComponent } from "./pages/item/items.component";
import { ItemDetailComponent } from "./pages/item/item-detail.component";
import { HttpClient } from "@angular/common/http";

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptFormsModule,
        NativeScriptHttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

更新了 app.component.ts

import { Component } from "@angular/core";
import { TranslateService } from '@ngx-translate/core';
import * as Platform from "platform";

@Component({
    selector: "ns-app",
    moduleId: module.id,
    templateUrl: "./app.component.html",
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        this.translate.setDefaultLang('en'); //chage pt
        //this.translate.use(Platform.device.language.split('-')[0]);
    }
}