Need help with ng2-translate in RC0


#1

I have been using ng2-translate for all my projects until beta.11 and all worked fine.
Now in RC0 i cant manage to make it work. Anybody here using ng2-translate in RC0 and can point me in right direction?


"Provide" function not found
#2

Hi, I have the same issue. ng2-translate works fine on beta.11 but breaks on RC0.


#3

I have a issue

    Error: Module /Users/user/Projects/vcp/myApp/node_modules/ng2-translate/ng2-translate.js does not export TranslateService (imported by /Users/user/Projects/vcp/myApp/.tmp/app/app.module.js)
        at Module.trace (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:7677:29)
        at ModuleScope.findDeclaration (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:7300:22)
        at Scope.findDeclaration (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5351:39)
        at Identifier.bind (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:6489:29)
        at /Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5151:50
        at ArrayExpression.eachChild (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5165:19)
        at ArrayExpression.bind (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5151:7)
        at /Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5151:50
        at Node.eachChild (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5168:5)
        at Node.bind (/Users/user/Projects/vcp/myApp/node_modules/rollup/dist/rollup.js:5151:7)

Any idea how to fix it?


#4

This is exactly the same error i am struggling with now… and no… no idea how to fix… yet…


#5

It would probably be helpful to see what your app.module.ts looks like.


#6
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
import { HttpModule, Http } from '@angular/http';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
	declarations: [
		MyApp,
		AboutPage,
		ContactPage,
		HomePage,
		TabsPage
	],

	imports: [
		IonicModule.forRoot(MyApp),
		HttpModule,
		TranslateModule.forRoot({
			provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), deps: [Http]
		})
	],

	exports: [HttpModule, TranslateModule],

	bootstrap: [IonicApp],
	entryComponents: [
		MyApp,
		AboutPage,
		ContactPage,
		HomePage,
		TabsPage,
	],
	providers: []
})
export class AppModule { }

This is how far i have gotten. Now i get error ng2-translate\ng2-translate.js does not export TranslateLoader


#7

Same Problem here.
Thanks
Daniel


#8

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

#9

Didn’t upgraded yet, so can’t tell why it didn’t work. But isn’t i18n now included in angular2 RC?

Therefore maybe ng2-translate didn’t work anymore because we shouldn’t use it anymore…

Just a thought

**** UPDATE

For the record, it seems correct that i18n was introduced with latest angular2 version. But it seems that that support, at this point, is still lacking of documentations. Furthermore, I read some post explaining that right now this solution doesn’t allow the possibility to change languages at runtime … so well I gonna try to stick to ng2-translate right now too


#10

Hi,

I tried your solution, and unfortunately i could’d manage to get it to work.

The error i get is:

ngc error: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 107:29 in the original .ts file), resolving symbol AppModule in /REMOVED_FOR_PRIVACY/.tmp/app/app.module.ts

The line in question is the useFactory: (http: …

TranslateModule.forRoot(
            {
                provide: TranslateLoader,
                useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
                deps: [Http]
            }
        )

I tried adding the following function:

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

And changed the import to:

TranslateModule.forRoot(
        {
            provide: TranslateLoader,
            useFactory: translateLoaderFactory,
            deps: [Http]
        }
    )

The error changed to:

ngc error: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /REMOVED_FOR_PRIVACY/.tmp/app/app.module.ts, resolving symbol AppModule in /REMOVED_FOR_PRIVACY/.tmp/app/app.module.ts

Any idea on how to get it working?

Greetins,
Kriz


#11

Add namedExports to node_modules/@ionic/app-scripts/config/rollup.config.js. I added this to commonjs. it seems to get rid of the “does not export” error for now, but I still have other errors in my way.

    commonjs({
        namedExports: {
            'node_modules/ng2-translate/ng2-translate.js': [ 'TranslatePipe', 'TranslateLoader', 'TranslateStaticLoader', 'TranslateService' ]
        }
    })

#12

Same problem here with the “ng2-translate/ng2-translate.js does not export” error.

Our app is bi-lingual so without ng2-translate working it is impossible to migrate from beta11 to RC.0.


#13

If I understand correctly, ng2-translate is not yet ready for AoT compilation

see


#14

My guess there will be more which are not yet or never will be ready for AOT compiling. The nicest solution would be to exclude modules from AOT if needed.


#15

OMG!!! I’ve got now some other errors not related to ng2-translate so maybe I found something (in Indiana Jones they would say “only the penitent man shall pass”)

So basically seems that the “old way” of importing the classes didn’t expose what I needed, but there is a way to import them.

So replace

import {TranslateService} from 'ng2-translate/ng2-translate';

with

import { TranslateService } from 'ng2-translate/src/translate.service';

or replace also

import {TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

with

import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';

#16

I’ve tried this and it seems to work! :smiley: Now I need to solve other errors to see if it actually does its job. Thanks!


#17

Works like a charm! Thx a lot :grinning:


#18

How does your app.module.ts look when you got it working?


#19

I’ve been using the starter template in order to test it. Below the code:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import {BrowserModule} from "@angular/platform-browser";
import {HttpModule, Http} from '@angular/http';
import {TranslateModule } from 'ng2-translate/ng2-translate';

import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    }),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: []
})
export class AppModule { }

#20

Have you tried compiling for a device? I get this error:

ngc error: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function