Description
When the localization key is missing, there is an "EXCEPTION: TypeError: target is undefined" and the translation stops when the current langauge is not the default language.
To reproduce, just try to translate a key that is missing in the JSON via pipe ´{{'MISSING_KEY' | translate}}. If the current language is the default language, everything is fine and it just shows MISSING_KEY. If the language is not the default language (and wasn't when the application started) you'll get an error and the translation stops.
Adding a MissingTranslationHandler doesn't change the behavior, it seems only to be called for the default language.
Versions: angular2 - beta 11; ng2-translate 1.11.0
I didn't get ng2-translate into plunker, so I'll have to copy the files here. You must reload the page after changing the language to see the effect:
boot.ts:
/// <reference path="../typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {provide} from 'angular2/core';
import {TranslateService, TranslateLoader, TranslateStaticLoader, MissingTranslationHandler} from 'ng2-translate/ng2-translate';
import {MyMissingTranslationHandler} from './basicmissingtranslationhandler';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'i18n', '.json'),
deps: [Http]
}),
provide(MissingTranslationHandler, {useClass: MyMissingTranslationHandler}),
TranslateService
]);
app.component.ts:
import {Component} from 'angular2/core';
import {TranslatePipe, TranslateService} from 'ng2-translate/ng2-translate';
import {LocalSettingsService} from './localsettings.service';
// ***** HEADER COMPONENT *****************
@Component({
selector: 'my-header',
template: `
<!--div>
<img src="./images/logo.png">
</div-->
<h2 >
{{'MYHEADLINE' | translate }}
</h2>
<div style="float: right;">
<select (change)="onChange($event.target.value)">
<option *ngFor="#lang of ['de', 'en']" [selected]="lang === translate.currentLang">{{lang}}</option>
</select>
</div>
<div style="clear: both;"></div>
<p>{{'MISSING_KEY' |translate}} </p> <!-- key is missing -->
`,
providers: [LocalSettingsService],
pipes: [TranslatePipe]
})
export class MyHeaderComponent {
constructor(private translate: TranslateService, private _localSettings: LocalSettingsService) { }
onChange(newVal: string) {
this._localSettings.setLanguage(newVal);
this.translate.use(newVal);
}
}
// ***** APPLICATION (main) COMPONENT *****************
@Component({
selector: 'my-app',
template: `
<my-header></my-header>
`,
directives: [MyHeaderComponent],
providers: [LocalSettingsService]
})
export class AppComponent {
constructor(translate: TranslateService, public _localSettings: LocalSettingsService) {
// use navigator lang if available
var userLang = navigator.language.split('-')[0];
userLang = /(de|en)/gi.test(userLang) ? userLang : 'en';
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('de');
// try to get saved language
var storedLang: string = _localSettings.getLanguage();
if (storedLang !== ""){
userLang = storedLang;
}
translate.use(userLang);
}
}
localsettings.service.ts:
import {Injectable} from "angular2/core";
@Injectable()
export class LocalSettingsService{
//todo: implement error handling!
getLanguage():string{
if (localStorage){
return localStorage['ng2Language'] || "";
}
else{
return "";
}
}
setLanguage(language: string){
if (localStorage){
localStorage['ng2Language'] = language;
}
}
}
en.json / de.json:
{
"MYHEADLINE": "ENGLISH headline"
}