ngx-translate/core

The internationalization (i18n) library for Angular

core's Issues

can I use this library with the UpgradeAdapter

I tried to use this library with the angular2 UpgradeAdapter. But I get the following error when I try to add it: TypeError: Cannot read property 'toString' of undefined

I tried the following
upgradeAdapter.addProvider(TRANSLATE_PROVIDERS);

Could someone provide a working sample. Thankx!

Feature: translate directive

I would be nice to have a translate directive like:

<div [translate]="just.another.property"></div>

https://angular-translate.github.io/docs/#/api/pascalprecht.translate.directive:translate

Do you accept pull requests for that?

Angular2 Beta 10 peer dependencies

I'm trying to install Angular2 Beta 10 and latest ng2-translate (1.10.1)

Seems like ng2 wants zone.js ^0.6.4 while ng2-translate wants zone.js ^0.5.10

npm ERR! Linux 3.13.0-79-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v0.12.12
npm ERR! npm v2.14.9
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants zone.js@^0.6.4
npm ERR! peerinvalid Peer [email protected] wants zone.js@^0.5.10

[HELP] Translate urls

Hi and thanks for the plugin, works great in template

Is it possible and could you show an exemple of how you would translate urls ?

Say we have a route defined this way :

{ path: '/login', component: LoginFormCmp, as: 'Login' }

Since translate.get returns an observable i cannot figure a way to do it

Thanks

TranslateLoader interface not exported and UseLoader missing

Currently it does not seem possible to provide custom loaders because the interface is not exported and TranslateService is missing a UseLoader method to initialize a custom loader.
Should be easy and quick to fix.

Error: Cannot read property 'getOptional' of undefined(…)

I have tried the ng2-translate, but I at runtime when it tries to use TranslateService:

/// <reference path="../../../../../../node_modules/angular2/platform/browser.d.ts"/>
import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {HomeControllerApp} from './component-home-controller-app';

bootstrap(HomeControllerApp, [
    HTTP_PROVIDERS,
    TranslateService
]);```

it throws an error:

```Error: Cannot read property 'getOptional' of undefined(…)run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305```

package.json dependencies:

"devDependencies": {
"grunt": "~0.4.5",
"grunt-cli": "~0.1.13",
"grunt-contrib-copy": "~0.8.1",
"i18next-client": "~1.11.0",
"jquery": "~2.2.0",
"knockout": "~3.4.0",
"log4js": "~0.6.27",
"requirejs": "~2.1.20",
"sockjs": "~0.3.15",
"typescript": "^1.7.3"
},
"dependencies": {
"bootstrap": "3.3.5",
"font-awesome": "4.5.0",
"angular2": "2.0.0-beta.0",
"es6-promise": "3.0.2",
"es6-shim": "0.33.13",
"ng2-translate": "1.7.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "0.5.13"
}

custom interpolators

Hi,

It is possible to use custom interpolators like in angular translate?

https://angular-translate.github.io/docs/#/guide/15_custom-interpolators

Thanks,
David

Feature: fallback language

As requested in #15:

It would also be great to specify a fallback language in config. So if your app is in English but is mostly translated to Japanese then you could fallback to English.

gulp based ng2 starters

Hey,
I tried but I am not working with gulp\systems.js as you do
can you create a simple branch for https://github.com/pkozlowski-opensource/ng2-play
with ng2-translate working?
I was thinking about branches with one commit, one branch per module
because usage of ng2-modules will produce a lot of questions :)
like this: valor-software/ngx-bootstrap#18

Systemjs + typescript import

Hi,

Thanks for your works on this library.
I try to load it from Systemjs/jspm without using gulp or other build tools just the plugin-typescript https://github.com/frankwallis/plugin-typescript

I add this package instruction to my config.js
"ng2-translate": { "defaultExtension": "ts", "meta": { "*.ts": { "loader": "ts" } } }

I import with:

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

But i have got this exception:

Uncaught SyntaxError: Unexpected token = translate.service.ts:179 Uncaught SyntaxError: Unexpected token = @ system.src.js:4892(anonymous function) @ system.src.js:4892(anonymous function) @ system.src.js:4892(anonymous function) @ system.src.js:4892 Uncaught SyntaxError: Unexpected token = Evaluating http://localhost:3000/dist/bundle.js Error loading http://localhost:3000/dist/bundle.js Error loading http://localhost:3000/app/app.ts

Any idea ?

Julie.

use interface instead of abstract class MissingTranslationHandler

It is much easier (more flexible) to implement an interface than extend a class in Typescript. MissingTranslationHandler has no added value being a an abstract class.

(I'd also check TranslateLoader for the same, but it has a play with DI, where class might be desirable)

Please define another method for Instant string retrieval

angular-translate had such a good method which you could use in JS (not in templates) without getting a Promise back.

$translate.instant('key') would then return you your value of key in lang file.

where as current translate (from ng2-translate) always returns observable. There are few parts in my code, where I would just want to call translate.instant(key) without making a long .subscribe(data =>... part.

Could that kind of function be also implemented in ng2-translate?

Thank you for your work!

👍

parser.flattenObject is called too often

As the language definition JSON object can get complex, it is a performance penalty to always flatten this JSON, any time a translate.get (or translate.instant) is called.

I'd recommend the other way: parsing the key (split by dot) and try to address the JSON field recursively.

E.g. (just a dummy demonstration):

let key = 'keyA.keyB.keyC';
let keys = key.split('.');
let value;
try {
  value = obj;
  for (let i = 0; i < keys.length; i++) {
    value = value[key[i]];
  }
} catch (e) {
  value = '!!!not found';
}

[ionic2] EXCEPTION: No provider for Http! (MyApp -> TranslateService -> Http)

Hi,

I'm having similar issue like someone else had with its Project. Mine was Ionic2 (2.0.0-alpha.49), ng2-translate (1.3.0) and angular2 (2.0.0-beta.0- yes, beta0 since ionic2 relies on it.

EXCEPTION: No provider for Http! (MyApp -> TranslateService -> Http)BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ zone-microtask.js:123(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:1493lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:1505lib$es6$promise$$internal$$publish @ zone-microtask.js:1476(anonymous function) @ zone-microtask.js:225microtask @ ng_zone.js:383run @ zone-microtask.js:120(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$asap$$flush @ zone-microtask.js:1287
browser_adapter.js:76 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ zone-microtask.js:123(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:1493lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:1505lib$es6$promise$$internal$$publish @ zone-microtask.js:1476(anonymous function) @ zone-microtask.js:225microtask @ ng_zone.js:383run @ zone-microtask.js:120(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$asap$$flush @ zone-microtask.js:1287

And another exception:

Error: DI Exception
    at NoProviderError.BaseException [as constructor] (exceptions.js:15)
    at NoProviderError.AbstractProviderError [as constructor] (exceptions.js:38)
    at new NoProviderError (exceptions.js:74)
    at Injector._throwOrNull (injector.js:851)
    at Injector._getByKeyDefault (injector.js:902)
    at Injector._getByKey (injector.js:842)
    at Injector._getByDependency (injector.js:828)
    at Injector._instantiate (injector.js:720)
    at Injector._instantiateProvider (injector.js:711)
    at Injector._new (injector.js:700)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430collection_1.StringMapWrapper.merge.onError @ ng_zone.js:325run @ zone-microtask.js:123(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:1493lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:1505lib$es6$promise$$internal$$publish @ zone-microtask.js:1476(anonymous function) @ zone-microtask.js:225microtask @ ng_zone.js:383run @ zone-microtask.js:120(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:93lib$es6$promise$asap$$flush @ zone-microtask.js:1287

I've injected ng2-translate as this:

import {HTTP_PROVIDERS} from 'angular2/http';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {
  App,
  IonicApp,
  Platform,
  Config,
  NavController,
  NavParams
} from 'ionic/ionic';
import {News} from './pages/News/News';

@App({
  templateUrl: 'build/app.html',
  config: {},
  providers: [HTTP_PROVIDERS, TranslateService]

})

export class MyApp {
  constructor(
    platform: Platform,
    app: IonicApp,
    translate: TranslateService
  ) {
  ...

Help me out (if possible) 👍

Cannot access the nested JSON Object

I am facing an issue, when i am using single string value in JSON it works, but when using object instead it doesn't works, below is the code explained.

   translate.setDefaultLang('en');

    translate.setTranslation('en', {
        "helloWorld": {
             "sayHello": "Hello there!"
         },
         "helloWorldSayHello": "Hello there!"
    });

    this.translate.use('en');

    <div>{{ 'helloWorldSayHello' | translate }} world</div> ----------//this does work
    <div>{{ 'helloWorld.sayHello' | translate }} world</div> ----------//this doesn't work

Is their any other way to make it work?

Webpack loading, not finding files.

Hey, I'm using webpack to load my TS files and it spits out some errors when I load this package.

I'm including the file like this

import {TranslateService} from 'ng2-translate';

and my webpack TS-loader configuration looks a little something like this

{ test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e|async)\.ts$/ ] },

I'm relatively new to typescript, and I imagine this has something to do with typings? Do I need to do anything special typings wise for this package?

TranslatePipe markForCheck - needs to happen on init as well?

The fix works great when using OnPush after a value has changed. However I'm seeing that the pipe does not transform anything when everything initializes/bootstraps from the start.

You can see this on this branch:
https://github.com/NathanWalker/angular2-seed-advanced/tree/on-push

Clone and checkout that branch, then:

npm install
npm start

You'll see that no text is translated on page to start, however if you change the language dropdown in top right, it will then fire change detection and then the pipe will transform and show all the text.

I would submit a PR to fix, but not sure what needs to be done. @ocombe hoping you know :)

Clarify which code belongs to which file

Especially for newcomers, it is hard to tell if you have to put some of the snippets to a component or service.

Additionally - Is it possible to setup the service once and use it in components and subcomponents?

Please update the documentation.

Thanks in advance.

Upgrade version 1.2.5 problem

EXCEPTION: No provider for Http! (App -> TranslateService -> Http)
browser_adapter.js:76EXCEPTION: No provider for Http! (App -> TranslateService -> Http)BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
browser_adapter.js:76STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
browser_adapter.js:76Error: DI Exception
at NoProviderError.BaseException as constructor
at NoProviderError.AbstractProviderError as constructor
at new NoProviderError (exceptions.js:74)
at Injector._throwOrNull (injector.js:852)
at Injector._getByKeyDefault (injector.js:903)
at Injector._getByKey (injector.js:843)
at Injector._getByDependency (injector.js:829)
at Injector._instantiate (injector.js:721)
at Injector._instantiateProvider (injector.js:712)
at Injector._new (injector.js:701)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:183NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328run @ core.js:99(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$$internal$$tryCatch @ es6-promise.js:326lib$es6$promise$$internal$$invokeCallback @ es6-promise.js:338lib$es6$promise$$internal$$publish @ es6-promise.js:309(anonymous function) @ microtask.js:37microtask @ ng_zone.js:383run @ core.js:96(anonymous function) @ ng_zone.js:343zoneBoundFn @ core.js:69lib$es6$promise$asap$$flush @ es6-promise.js:120
bootstrap.ts:18NoProviderError {message: "No provider for Http! (App -> TranslateService -> Http)", stack: "Error: DI Exception↵ at NoProviderError.BaseExc…ttp://127.0.0.1:8899/build/common.js:9511:22)", keys: Array[3], injectors: Array[3]}

---

note：V 1.2.4 is OK。

problems when unit testing applications that use this lib

https://github.com/ocombe/ng2-translate/blob/master/src/translate.service.ts#L4-L6

Should not include '.js'
Causes karma issues like:

01 02 2016 16:37:38.185:WARN [web-server]: 404: /base/node_modules/rxjs/add/observable/fromArray.js.js
01 02 2016 16:37:38.187:WARN [web-server]: 404: /base/node_modules/rxjs/add/operator/share.js.js
01 02 2016 16:37:38.192:WARN [web-server]: 404: /base/node_modules/rxjs/add/operator/map.js.js
01 02 2016 16:37:38.447:WARN [web-server]: 404: /base/node_modules/rxjs/add/observable/fromArray.js.js
01 02 2016 16:37:38.447:WARN [web-server]: 404: /base/node_modules/rxjs/add/operator/share.js.js
01 02 2016 16:37:38.448:WARN [web-server]: 404: /base/node_modules/rxjs/add/operator/map.js.js

Problem in Unit Test Environment

I written an wrapper arround ng2-translate to perfectly fit my use cases. While testing i dont want to test only my wrapper that it just call your correct functions.

So my function calls translateService.use. The lang isn't available so getTranslation is called. There you load them and subscribe to the pending observable. In this subscription you are going to delete this.pending. This is my problem.

I ve a very similar testing setup like you. The only change is located in the answering of MockBackend conenctions. You are going to save them and answering them when you call your mockBackendResponse function. I will answer them directly when they appear.
So the Observable wil lbe resolvewd directly and the subscription will executed directly before the use function can subscribe to this.pending. This.pending is deleted and i got the following error:

TypeError: Cannot read property 'subscribe' of undefined
        at TranslateService.use (/.../node_modules/ng2-translate/src/translate.service.js:90:20)

The error seems to be correct thorugh my test environment.

My Question is why are you going to delete this.pending? I removed it and all your tests passes and I could find any problems while running ng2-translate. So is it possible to remove line 134 in translate.service.ts?

Greetings,
Daniel

Property 'useStaticFilesLoader' does not exist on type 'TranslateService'.

Hi,

I am getting this error in my terminal window.

initializeTranslateServiceConfig() {
    let prefix = './i18n/';
    let suffix = '.json';
    this.translate.useStaticFilesLoader(prefix, suffix);

I am using "ng2-translate": "^1.8.0", what could be wrong?

Update to angular2.0.0-alpha.53

I need a version compatible with angular2.0.0-alpha.53.
Now you have fix on package.json "angular2": "2.0.0-alpha.52", as dependency

getTranslation call does not have fallback mechanism

If call getTranslation for a language that does not have localized json file, there is no fallback mechanism to get the default language and it will throw angular 2 exception.
I also checked the fallback logic inside get by key function in source code. The fallback mechanism seems not correct as well. It assumes that the default language has been loaded which is not the case all the time. It probably should try to send a request to get it if it is not in cache.

SystemJS cant find ng2-translate when using the Angular 2 quickstart setup

Hey,
at first I like to say that I appreciate your affords. Until now I haven't found anything about i18n in Angular 2, even though they promised it as a feature. So: Thx!

I got a project, which uses pretty much the same setup, as in the Angular 2 quickstart tutorial.
I followed your install instructions, but SystemJS is not looking at the node_modules folder.
I expect to load ng2-translate from /node_modules/ng2-translate/ng2-translate.js but the browser is requesting /ng2-translate/ng2-translate.js

I made a repository, which reproduces the error https://github.com/fr3dm4n/ng2Quickstart-beta.0/tree/ng-translate

It may be my fault,but you could help other ng2-SystemJs rookies as well ;)

useStaticFilesLoader is not a function ?

Hi all,

I have a problem when use ng2-translate
This is my code

Boot.ts

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
import {Helper} from './utils/helper';
import {BaseHTTP} from './utils/baseHTTP';
import {App} from './app';

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS, 
    TRANSLATE_PROVIDERS,
    TranslateService,
    Helper,
    BaseHTTP,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

app.ts

import {Component, Injectable, provide} from 'angular2/core';
import {RouterOutlet, RouteConfig} from 'angular2/router';
import {Http} from 'angular2/http';
import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

@Injectable()
@Component({
    selector: 'main-app',
    templateUrl: './src/app/app.html',
    directives: [RouterOutlet],
    pipes: [TranslatePipe]
})
export class App {
    public translate;

    constructor(translate: TranslateService) {
        this.translate = translate;

        this.translationConfig();
    } 

    translationConfig() {
        var prefix = 'src/app/core/languages';
        var suffix = '.json';
        var userLang = 'en';
        this.translate.useStaticFilesLoader(prefix, suffix);
        this.translate.use(userLang);
    }  
}

And an error occurs this.translate.useStaticFilesLoader is not a function. But it work in last friday (4/3/2016) and today it don't work.
Please help me, thanks

Including ts source file inside npm package would be problematic

Hey,

I upgraded to v1.6.4 and the new version includes ts source files inside npm package. And I found that my typescript compiler would actually try to compile the ts files. With this version, the typescript compiler is actually messing up with the output path since it considered the folder contains node_modules folder is the root folder which is actually not.

I also took a look at the npm package structure of angular 2. They did not have ts files along with those d.ts files. And the main d.ts file would only export other d.ts files not ts files.

I am wondering if you guys can change the structure of bundled npm package?

Thanks.

Re-evaluation of translate pipes if ChangeDetectionStrategy.OnPush is set

Hi,

I am currently try to use ChangeDetectionStrategy.OnPush in all my components. That means, that all bindings are not checked if the state of my application stays the same. Thats great but it means that all translate pipes are not getting re-evaluated if I change the current language.

I think It may possible to wrap the pipe into an own directive that listens to the onLangChange event and invalidates itself.

Do you have any Ideas?

Peer Dependency

Its a bit similar to #37.

I want to update to angular 2 beta 7. They ve updated RXjs to beta 2. They depend on version two and you peer dependency depend on beta 0. So i cant resolve this on my own. I would recommend to set peer dependency to ~beta.0. Then you can support different versions of angular 2 and the developer needs to resolve the peer dependency by his own.

Greetings,
Daniel

Using TranslatePipe with ChangeDetectionStrategy.OnPush?

@ocombe I was experimenting with using ng2-translate with ChangeDetectionStrategy.OnPush. Whenever I tuned it on, none of the pipes in the view would change their values whenever...

translate.use('... a different language...');

...was fired. Thinking it has something to do with:
https://github.com/ocombe/ng2-translate/blob/master/src/translate.pipe.ts#L8

Any ideas on how to make ng2-translate work with OnPush only?

unknown function bootstrap, incorrect order

Hello there!

I just started out to develop with Angular2.
Currently I'm extending an existing project to implement ng2-translate and I just can't get it to work.

First of all, the method bootstrap does not exist. It doesn't get imported from any of your calls either. So.. I have no idea about it. More information on that would be appreciated,

Second - How can you use TranslateService before you import it? Thats not going to work AFAIK.

Any help to resolve this issue is very much appreciated.

import {Component, OnInit, Injectable} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';
import {HTTP_PROVIDERS} from 'angular2/http';
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

Getting error while incorporating ng2-translate.

    System.config({
        packages: {
            assets: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        map: {
            moment: 'node_modules/moment/moment.js',
            'ng2-translate': 'node_modules/ng2-translate'
        }

    });
    System.import('assets/main')
            .then(null, console.error.bind(console));

This is my system.config script, and I got error on browser's console is

1. Uncaught (in promise) TypeError: object is not a constructor
   at then (native)
2. angular2-polyfills.js:1243 SyntaxError: Unexpected token <
   Evaluating http://localhost:3000/node_modules/ng2-translate/ng2-translate
   Error loading http://localhost:3000/assets/main.js
   at SystemJSLoader.__exec (http://localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16)
   at entry.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3521:16)
   at linkDynamicModule (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3126:32)
   at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:2969:11)
   at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3301:13)
   at doDynamicExecute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:703:25)
   at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:905:20)
   at doLink (http://localhost:3000/node_modules/systemjs/dist/system.src.js:557:7)
   at updateLinkSetOnLoad (http://localhost:3000/node_modules/systemjs/dist/system.src.js:605:18)
   at http://localhost:3000/node_modules/systemjs/dist/system.src.js:417:11

Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

Use without system.js

Can you give a short example of using ng2-translate without system.js?

this.onLangChange.emit is not a function

Hi,

Using ng2-translate 1.7.0 i have the followinf error when I set language :
"this.onLangChange.emit is not a function"

The bug doesn't stop angular executing or translater job.

Thanks

Missing Translation Handler

A MissingTranslationHandler can be set up in angular-translate while the config phase.

I would like to have something similar in ng2-translate. As I ve seen your code I would think that this would be no problem to be added. If you would accept that feature I could provide a PR.

Example Use Case:
The requested Key isnt available in the translation. In the dev mode of your application it would call a http get to a specific route. On the serverside you can add the not existing key to your translation file. So you can just use new keys and add the translations later without missing a key.

Exception if translation key is missing

If a translation key is missing in a language, that is not set as defaultLang I get following exception:

TypeError: Cannot convert undefined or null to object
    at Function.keys (native)
    at step (http://localhost:5555/node_modules/ng2-translate/src/translate.parser.js:37:20)
    at Parser.flattenObject (http://localhost:5555/node_modules/ng2-translate/src/translate.parser.js:48:9)
    at TranslateService.getParsedResult (http://localhost:5555/node_modules/ng2-translate/src/translate.service.js:199:46)
    at TranslateService.get (http://localhost:5555/node_modules/ng2-translate/src/translate.service.js:229:52)

It seems that the code is trying to access the key of the default language as a fallback, without loading the language file.

I am not sure how to handle it. Maybe it is a good idea to remove the fallback and add the ability to return a string in the MissingTranslationHandler.

using in project

Hi,

I'm trying to integrate this library in the starter kit provided by AngularClass:
https://github.com/AngularClass/angular2-webpack-starter.

PatrickJS/PatrickJS-starter#208

The webpack dev server is serving from the src folder. The translations are defined in
src/assets/i18n.

It doesn't seem to find the translation files using the provided setup:

export class App {
  name = 'Angular 2 Webpack Starter';
  url = 'https://twitter.com/AngularClass';
  constructor(translate: TranslateService) {

    var prefix = 'assets/i18n';
    var suffix = '.json';
    translate.useStaticFilesLoader(prefix, suffix);

    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(nl|fr|en)/gi.test(userLang) ? userLang : 'en';

    // optional, default is "en"
    translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use(userLang);

  }
}

But if I change the configuration to be var prefix = 'src/assets/i18n'; it works.

I'm not sure this is something related to your package or perhaps to the starter kit architecture. So that's why I'll post it and reference it in both projects.

Kr
Sam V.

Feature: "instant" translateService method, e.g. synch translations

Hi, I've just started using the library but I'm trying to use dynamic values (i.e. belonging to the component ).
I've checked the angular-translate library and I've seen it's possible pass in the filter a scope reference, but I don't want to pollute my component logic.
So I created an helper method which takes in the key and the values object, but the translationService, at the moment, it always returns an Observer, which means you have to use the async pipe in the template.

{{ utils.getLocalisedString("MONETARY.NO_SENT_TITLE", { value: mycomponentValue}) }}

I've looked into angular-translate and I've refactored the code in 10 minutes for a basic "instant" method, which returns synchronously the interpolated string (in my app, I've made sure the language is always preloaded, so the sync approach fits my case).

How would you deal with this scenario?

Thanks,
M.

angular2-polyfills.js:1243 Error: TypeError: Cannot read property 'getOptional' of undefined

After I have upgraded from 1.7.3 to 1.10.0, my's app boostrap throws an error:

bootstrap(HomeControllerApp, [
    HTTP_PROVIDERS,
    ROUTER_BINDINGS,
    // TRANSLATE_PROVIDERS,
    provide(TranslateLoader, { // it works if I comment this provide function
        useFactory: (http: Http) => new TranslateStaticLoader(http, "locales", "/translation.json"),
        deps: [Http]
    }),
    // TranslateService,
    provide(LocationStrategy, { useClass: HashLocationStrategy })

]);

angular2-polyfills.js:1243 Error: TypeError: Cannot read property 'getOptional' of 
undefined(…)

Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @   angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback   @   angular2-polyfills.js:480
lib$es6$promise$$internal$$publish  @   angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @   angular2-polyfills.js:401
(anonymous function)    @   angular2-polyfills.js:123
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @   angular2-polyfills.js:262
Mutation (async)        
(anonymous function)    @   angular2-polyfills.js:237
asap    @   angular2-polyfills.js:191
scheduleMicrotask   @   angular2-polyfills.js:129
(anonymous function)    @   angular2-polyfills.js:122
lib$es6$promise$$internal$$fulfill  @   angular2-polyfills.js:411
lib$es6$promise$$internal$$resolve  @   angular2-polyfills.js:392
resolvePromise  @   angular2-polyfills.js:516
a   @   system.js:4
i.onreadystatechange    @   system.js:4
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
XMLHttpRequest.send (async)     
N   @   system.js:4
(anonymous function)    @   system.js:4
lib$es6$promise$$internal$$initializePromise    @   angular2-polyfills.js:515
lib$es6$promise$promise$$Promise    @   angular2-polyfills.js:806
(anonymous function)    @   system.js:4
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:4
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @   angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback   @   angular2-polyfills.js:480
lib$es6$promise$$internal$$publish  @   angular2-polyfills.js:451
(anonymous function)    @   angular2-polyfills.js:123
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @   angular2-polyfills.js:262
Mutation (async)        
(anonymous function)    @   angular2-polyfills.js:237
asap    @   angular2-polyfills.js:191
scheduleMicrotask   @   angular2-polyfills.js:129
(anonymous function)    @   angular2-polyfills.js:122
lib$es6$promise$$internal$$fulfill  @   angular2-polyfills.js:411
lib$es6$promise$$internal$$resolve  @   angular2-polyfills.js:392
resolvePromise  @   angular2-polyfills.js:516
a   @   system.js:4
i.onreadystatechange    @   system.js:4
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
XMLHttpRequest.send (async)     
N   @   system.js:4
(anonymous function)    @   system.js:4
lib$es6$promise$$internal$$initializePromise    @   angular2-polyfills.js:515
lib$es6$promise$promise$$Promise    @   angular2-polyfills.js:806
(anonymous function)    @   system.js:4
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:5
(anonymous function)    @   system.js:4
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @   angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback   @   angular2-polyfills.js:480
lib$es6$promise$$internal$$publish  @   angular2-polyfills.js:451
(anonymous function)    @   angular2-polyfills.js:123
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @   angular2-polyfills.js:262

original working dependencies:

"dependencies": {
    "bootstrap": "3.3.5",
    "font-awesome": "4.5.0",
    "angular2": "2.0.0-beta.0",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.13",
    "ng2-translate": "1.7.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.13"
  }

after upgrade:

"dependencies": {
    "bootstrap": "3.3.5",
    "font-awesome": "4.5.0",
    "angular2": "2.0.0-beta.9",
    "es6-promise": "3.0.2",
    "es6-shim": "0.35.0",
    "ng2-translate": "1.10.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.24",
    "zone.js": "0.5.15"
  }

Ionic2-Meteor integration

I have an Angular2-Meteor project using the barbatus:ionic2-meteor package for Ionic2.

I have successfully used the ng2-translate module with a regular Ionic2 app, but I'm having trouble getting it to work in a meteor project (v1.2.1). I do not know how use the SystemJS module loader to load npm modules for use in the project. I keep getting Cannot find module 'ng2-translate/ng2-translate'

How do I configure my Meteor project to use the ng2-translate module?

Remove *.ts files from src during publishing to npm.

During compilation I have the errors

error TS6059: File '../node_modules/ng2-translate/src/translate.parser.ts' is not under 'rootDir' '../src'. 'rootDir' is expected to contain all sou
rce files.
error TS6059: File '../node_modules/ng2-translate/src/translate.pipe.ts' is not under 'rootDir' '../src'. 'rootDir' is expected to contain all sourc
e files.
error TS6059: File '../node_modules/ng2-translate/src/translate.service.ts' is not under 'rootDir' '../src'. 'rootDir' is expected to contain all so
urce files.

Configuration:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "noImplicitAny": true,
    "declaration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "noEmitHelpers" : true,
    "rootDir" : "src",
    "outDir" : "tmp/es5"
  },

  "exclude": [
    ".git",
    "node_modules",
    "tmp"
  ]
}

This is because ng2-translate.d.ts is importing from folder src where there are .d.ts and .ts files, and ts files are loading by default by tsc.

angular2 have a different approach where ts sources are in ts folder.

After removing .ts files from src everything works fine.

use separate translation .json files for each component

my current project is very big and i need this feature. Is it possible at the moment?

No provider for TranslateLoader!

I am using ng2-translate to localize my ionic 2 app, But i am getting this runtime exception
1 175606 group EXCEPTION: No provider for TranslateLoader! (MyApp -> TranslateService -> TranslateLoader) 2 175607 error EXCEPTION: No provider for TranslateLoader! (MyApp -> TranslateService -> TranslateLoader) 3 175607 error STACKTRACE: 4 175607 error Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:8101/build/js/app.bundle.js:7706:24) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8101/build/js/app.bundle.js:8402:17) at new NoProviderError (http://localhost:8101/build/js/app.bundle.js:8438:17) at Injector._throwOrNull (http://localhost:8101/build/js/app.bundle.js:6745:20) at Injector._getByKeyDefault (http://localhost:8101/build/js/app.bundle.js:6796:22) at Injector._getByKey (http://localhost:8101/build/js/app.bundle.js:6736:26) at Injector._getByDependency (http://localhost:8101/build/js/app.bundle.js:6722:26) at Injector._instantiate (http://localhost:8101/build/js/app.bundle.js:6613:37) at Injector._instantiateProvider (http://localhost:8101/build/js/app.bundle.js:6603:26) at Injector._new (http://localhost:8101/build/js/app.bundle.js:6592:22)

Here is how i am using it:
`import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';

@app({
template: '<ion-nav [root]="rootPage">',
config: {},
providers: [TranslateService],
pipes: [TranslatePipe]
})
export class MyApp {
rootPage: Type = TabsPage;
translate;

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

    platform.ready().then(() => {
        console.log(navigator.language.split('-')[0]);
          this.initializeTranslateServiceConfig();
    });
}

initializeTranslateServiceConfig() {
    var prefix = 'assets/i18n/';
    var suffix = '.json';
    this.translate.useStaticFilesLoader(prefix, suffix);
    var userLang = navigator.language.split('-')[0];
    userLang = /(de|en|hr)/gi.test(userLang) ? userLang : 'en';
    this.translate.setDefaultLang('en');
    this.translate.use(userLang);
}

}
`
Please help in finding why i have this error,

Loading Translation Files Per Entry-Point?

Sorry if this isn't quite the right forum for this, but I'm working on what will become a really large project and am splitting it into different entrypoints / webpack bundles. It's possible a user with access to module A might not have access to module B, or that a deployment for a particular customer might not even include module C.

Is there a (recommended) way to split lang.json files on a module level with this plugin? Would I call
translate.useStaticFilesLoader(prefix, suffix); multiple times?

Better to include them in the module TypeScript and use set(key: string, value: string, lang?: string): so that it's part of what webpack bundles for that module anyway?

useStaticFilesLoader() throws TypeError

I modified your ng2-play fork to use the static file loader. It throws the following error:

angular2.js:23514 EXCEPTION: Error during instantiation of HelloApp!.BrowserDomAdapter.logError @ angular2.js:23514BrowserDomAdapter.logGroup @ angular2.js:23525ExceptionHandler.call @ angular2.js:1145(anonymous function) @ angular2.js:14801NgZone._notifyOnError @ angular2.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.js:23514 ORIGINAL EXCEPTION: TypeError: this.http.get(...).map is not a functionBrowserDomAdapter.logError @ angular2.js:23514ExceptionHandler.call @ angular2.js:1154(anonymous function) @ angular2.js:14801NgZone._notifyOnError @ angular2.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.js:23514ExceptionHandler.call @ angular2.js:1157(anonymous function) @ angular2.js:14801NgZone._notifyOnError @ angular2.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.js:23514 TypeError: this.http.get(...).map is not a function
    at TranslateStaticLoader.getTranslation (translate.service.ts:40)
    at TranslateService.getTranslation (translate.service.ts:119)
    at TranslateService.use (translate.service.ts:99)
    at new HelloApp (hello.js:36)
    at angular2.js:1376
    at Injector._instantiate (angular2.js:11920)
    at Injector._instantiateProvider (angular2.js:11859)
    at Injector._new (angular2.js:11849)
    at InjectorInlineStrategy.instantiateProvider (angular2.js:11609)
    at ElementInjectorInlineStrategy.hydrate (angular2.js:13234)BrowserDomAdapter.logError @ angular2.js:23514ExceptionHandler.call @ angular2.js:1158(anonymous function) @ angular2.js:14801NgZone._notifyOnError @ angular2.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559load @ system.src.js:1017xhr.onreadystatechange @ system.src.js:1026run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111XMLHttpRequest.send (async)fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:1558lib$es6$promise$promise$$Promise @ angular2-polyfills.js:1849(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.js:23514 ERROR CONTEXT:

Using translations within html attribute

I don't get this seem to work, using Ionic2 and ng2-translate.

<ion-refresher pullingText="{{ 'Pull to refresh...' | translate }}">

Getting error:

EXCEPTION: SyntaxError: Unexpected token }

Is there a way to fix this? Thank you for all the help.

SystemJs compatibility and bundle distribution

We have few problems integrating your library.
The first is the compatibility with SystemJs......second we don't have any "bundle" file.

For the first we use tsconfig.json with:

 "target": "es5"
 "module": "system",

So we actually get always Uncaught ReferenceError: require is not defined.

For the second problem we are developing a solution using Visual Studio 2015 and we have node_modules directory outside "wwwroot" so we have to move files directly into a folder named libs inside wwwroot. For example we have the "angular2.dev.js" file ...now we really need to have a single bundled file to be used otherwise it will be a "mess"....i guess.
What do you think?

Peer dependency error

When trying to install:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings
' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants es6-promise@^3.0.2
npm ERR! peerinvalid Peer [email protected] wants es6-promise@~3.0.2

Is it possible to load the JSON translation via the HTTP (not a local static file) ?

Is it possible to load the JSON translation via the HTTP (not a local static file) ?

Detailed documentation for methods

It is unclear if you have to use useStaticFilesLoader in conjunction with getTranslation.
Which is required and where (!) see #27.

It is unclear which path is used for the useStaticFilesLoader. Relative to directory of execution? Relative to file? Absolute?

Any additions to the documentation and a less vague description of the methods would be very much appreciated.

Thanks in advance.