Need help with ng2-translate in RC0

sveinla · September 28, 2016, 8:28pm

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?

shlish · September 28, 2016, 9:01pm

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

nextapps · September 28, 2016, 11:03pm

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?

sveinla · September 28, 2016, 11:29pm

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

rapropos · September 28, 2016, 11:33pm

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

sveinla · September 28, 2016, 11:35pm

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

danielmm1997 · September 29, 2016, 12:37am

Same Problem here.
Thanks
Daniel

zxshinxz · September 29, 2016, 4:43am

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

reedrichards · September 29, 2016, 5:19am

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

KrizRoring · September 29, 2016, 8:54am

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

peelfresh · September 29, 2016, 9:43am

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' ]
        }
    })

osi · September 29, 2016, 12:54pm

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.

reedrichards · September 29, 2016, 12:59pm

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

see

osi · September 29, 2016, 1:00pm

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.

reedrichards · September 29, 2016, 2:08pm

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';

osi · September 29, 2016, 2:20pm

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

763a0bc7 · September 29, 2016, 2:29pm

Works like a charm! Thx a lot

sveinla · September 29, 2016, 2:32pm

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

763a0bc7 · September 29, 2016, 2:34pm

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

membersheep · September 29, 2016, 3:35pm

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

Topic		Replies	Views
RC.0 ng-translate ionic-v3	22	2331	November 22, 2016
Ionic 2 RC0 and ng translate Error on Build android (ngc: Error:) ionic-v3	0	625	October 12, 2016
Ionic2 RC2 With ng2-translate - can't config ionic-v3	3	873	December 9, 2016
Anyone else giving up on RC0? Rolling back to Beta 11! ionic-v3	51	5704	November 18, 2016
Can't install ng2-translate in my ionic 2 project (using ionic-angular: 2.0.0-beta.11) ionic-v3	4	1658	August 19, 2016

Need help with ng2-translate in RC0

Related topics