Core: ng2-translate.js does not export TranslateLoader

[apreg]

I'm submitting a ... (check one with "x")

[x ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
Throws an error:

\ng2-translate\ng2-translate.js does not export TranslateStaticLoader (imported by D:\WORKSPACE\JS\lia2\.tmp\app\app.module.js)
    at Module.trace (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:7677:29)
    at ModuleScope.findDeclaration (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:7300:22)
    at Scope.findDeclaration (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5351:39)
    at Identifier.bind (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:6489:29)
    at D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5151:50
    at NewExpression.eachChild (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5168:5)
    at NewExpression.bind (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5151:7)
    at D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5151:50
    at ReturnStatement.eachChild (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5168:5)
    at ReturnStatement.bind (D:\WORKSPACE\JS\lia2\node_modules\rollup\dist\rollup.js:5151:7)

Expected/desired behavior
Simply works

Reproduction of the problem

import {HttpModule, Http} from "@angular/http";
import {TranslateModule, TranslateStaticLoader, TranslateLoader} from "ng2-translate";

export function translateLoaderFactory(http: any) {
  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
}

@NgModule({
  declarations: [...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: translateLoaderFactory,
      deps: [Http]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
...
  ],
  providers: [ ]
})
export class AppModule {}

What is the expected behavior?

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ng2-translate version: 2.5.0
• Angular version: 2.0.0 final
• Ionic 2.0.0-rc.0
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5]

[zxshinxz]

If you want to make it work for now
try to import directly like under
should work.

app.module.ts

    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import { Http, HttpModule } from "@angular/http";
    import { StampPage } from "../pages/stamp/stamp";
    import { CouponPage } from "../pages/coupon/coupon";
    import { MenuPage } from "../pages/menu/menu";
    import { AboutUsPage } from "../pages/about-us/about-us";
    import { PhotoPage } from "../pages/photo/photo";
    import { EventPage } from "../pages/event/event";
    import { SettingPage } from "../pages/setting/setting";
    import { Barcode } from "../pages/barcode/barcode";
    import { BarcodeZoom } from "../pages/barcode-zoom/barcode-zoom";
    import { App } from "./app.component";
    import { TranslateModule} from "ng2-translate/ng2-translate";
    import { TranslateLoader, TranslateStaticLoader } from "ng2-translate/src/translate.service";

    @NgModule({
      imports: [
        IonicModule.forRoot(App),
        HttpModule,
        TranslateModule.forRoot(
          {
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http]
          }
        )
      ],
      declarations: [
        App,
        StampPage,
        CouponPage,
        MenuPage,
        AboutUsPage,
        PhotoPage,
        EventPage,
        SettingPage,
        Barcode,
        BarcodeZoom
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        App,
        StampPage,
        CouponPage,
        MenuPage,
        AboutUsPage,
        PhotoPage,
        EventPage,
        SettingPage,
        BarcodeZoom
      ],
      providers: []
    })
    export class AppModule {
    }

app.component.ts

    import { Component, ViewChild } from '@angular/core';
    import { Platform, Nav } from 'ionic-angular';
    import { StatusBar } from 'ionic-native';
    import { StampPage } from "../pages/stamp/stamp";
    import { CouponPage } from "../pages/coupon/coupon";
    import { MenuPage } from "../pages/menu/menu";
    import { AboutUsPage } from "../pages/about-us/about-us";
    import { PhotoPage } from "../pages/photo/photo";
    import { EventPage } from "../pages/event/event";
    import { SettingPage } from "../pages/setting/setting";
    import { TranslateService } from "ng2-translate/src/translate.service";

    @Component({
      templateUrl: 'app.component.html'
    })
    export class App {
      @ViewChild(Nav) nav: Nav;

      rootPage: any = StampPage;
      pages: Array<{label: string, component: any}>;

      constructor(private platform: Platform
        , private translate: TranslateService) {
        this.initializeApp();

        this.pages = [
          {label: 'side.stamp', component: StampPage},
          {label: 'side.coupon', component: CouponPage},
          {label: 'side.menu', component: MenuPage},
          {label: 'side.aboutUs', component: AboutUsPage},
          {label: 'side.photo', component: PhotoPage},
          {label: 'side.event', component: EventPage},
          {label: 'side.setting', component: SettingPage}
        ];
      }

      initializeApp() {

        this.platform.ready().then(() => {
          // Okay, so the platform is ready and our plugins are available.
          // Here you can do any higher level native things you might need.
          StatusBar.styleDefault();
        });

        this.translateConfig();
      }

      translateConfig() {
        // var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        // userLang = /(de|en|es)/gi.test(userLang) ? userLang : 'en';
        this.translate.setDefaultLang('en');
        this.translate.use('kr');
      }

      openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
      }
    }

[apreg]

Thank you for the workaround. It works in the browser with ionic serve but I cannot deploy it to a device because angular compiler complains. It does not say too much about the real cause just:

 ngc error: Error: Error at lia2/.tmp/app/main.prod.ts:4:36: Cannot find module './app.module.ngfactory'.

so I run it directly this way: $ "./node_modules/.bin/ngc.cmd" and got

Error at lia2/src/app/app.module.ts:16:10: Module ''ng2-translate/ng2-translate'' has no exported member 'TranslateModule'.

[ocombe]

I'm closing it as it is a duplicate of https://github.com/ocombe/ng2-translate/issues/218
the problem is that the lib is not compatible with AoT _yet_. I've talked with the angular team a bit these past days (at angular connect and on slack), and if you want a lib to be compatible with AoT you have to precompile it before shipping it on npm.
I'll do that and then it should work for you