Ng2-translate and webpack

Question

Good afternoon guys, I'm using ng2-translate to do the translation of the app and run perfectly with the command: tns run ios | Android         But I'm having an error while running with webpack with the following parameters: tns run 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

Repository to test: https://github.com/gustavost26/teste-ng2-translate

Answer 1

Good that you provided a example project, I was able to quickly review it and looks like you are using latest version of Angular and rxjs but your translate module is completely outdated.

Replace it with the refactored latest version of same package

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

Updated 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 { }

Updated 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]);
    }
}