tflori / angular-translator Goto Github PK

Write documentation how to use pipes, add custom pipes and limitations.

Peer dependencies are still for 2.*. Would be good to update to 4.* and rename the project to angular-translator maybe. #itsJustAngular :)

Hi,
it is possible to implement some fallbacks if a key could not be resolved?
The following logic would be conceivable:

• If the key in the actual language not available, makes a fallback to defaultLanguage.
• If even defaultLanguage[key] doesn't resolve, it returns the key.

Put this code to Translator instant function before line 263:

var t;
if (!this.translations[language] || !this.translations[language][key]) {
	this.logHandler.info(this.generateMessage("missing", { key: key, language: language }));
	if (language === this.config.defaultLanguage) {
        // This key is not available in the default language     
		return key;
	}
	else {
	    // Use default language to translate the key
		t = this.instant(key, params, this.config.defaultLanguage);
	}
}
else {
	t = this.translations[language][key];
}

I've just tried to upgrade my package.json (devDependencies) to typescript to v2.6.2 but building in AOT I receive this error:

ERROR in ./node_modules/angular-translator/src/TranslateLogHandler.ts
Module build failed: Error: C:\git\myproject\src\node_modules\angular-translator\src\TranslateLogHandler.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. 
TS files in published libraries are often a sign of a badly packaged library. 
Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

This type of error continue for the other files like TranslatePipe, Json, Translator etc
The error suggest you have to package the library using Angular Package Format

I'm also using angular v5.2.0

Under: https://github.com/tflori/angular2-translator/blob/master/docs/index.md

This text:

TranslateConfig - The TranslateConfig is a dependency for TranslateService. As the name suggests it gives a configuration for the TranslateService.

TranslateService - The TranslateService holds the core functionality for this module. It is not only for translation also it provides functions for control structures.

TranslateComponent - This is a angular2 component for the selector [translate]

TranslatePipe - The TranslatePipe is the easiest way for translation but it has some drawbacks.

TranslateLoaderJson - For now this is the only existing TranslateLoader.

I've just released version 3.0.

Basically it is just an upgrade for incompatibility with angular 7. Now version 3 is for angular 7 and later while version 2.4 is for angular 2 to 6.

I would be glad if someone can take over maintenance for this project as I'm not using angular at the moment.

... on initialization. Currently it is using defaultLanguage - which is fine when the language is not provided by this module.

Hi,
I want to extend TranslationLoaderJson and use http service. But is private and can't use it.

import { TranslationLoader } from "../TranslationLoader";
import { Http } from "@angular/http";
export declare class TranslationLoaderJson extends TranslationLoader {
    private http;
    constructor(http: Http);
    load({language, module, path}: {
        language?: string;
        module?: string;
        path?: string;
    }): Promise<object>;
    private flattenTranslations(translations, data, prefix?);
}

Thanks

here: https://github.com/tflori/angular-translator/blob/master/docs/modules.md#example-use-case

This occurs on (building with AOT option in my case) using angular-translator v2.4.0 with angular v4.

Accordingly to semver rules it was more correct naming your latest version to v3.0.0 considering the fact that it is based to angular v5 (see this commit)

Hi,
TranslationLoaderJson has invalid documentation. On last example, in main.ts file we have a loaderOptions object which has path field set to 'assets/localization/-lang.json'. This will resolve in file lookup error. I think this should be changed to 'assets/localization/{{ language }}-lang.json'.

It's the only class why we have 99,3% instead of 100% coverage.

The documentation still uses TranslateService and other things... rewrite documentation

Sorry, I have not tested yet...
I've not found nothing about ahead-of-time compliation in your read-me.

Hi guys
So I saw that nested objects are currently not supported in the default translate loader. This line disables it: https://github.com/tflori/angular2-translator/blob/master/angular2-translator/TranslateLoaderJson.ts#L48

Maybe including support for nested objects in the default translate loader would be a good idea? So something like this would be possible: translate.translate("app.loginText")

cheers

Hi,
ich versuche das Problem lieber auf Deutsch zu beschreiben, wenn es für dich kein Problem ist.

Ich habe einen Button:

<button class="btn btn-secondary"
                    #discardButton
                    [disabled]="model.disabled"
                    (click)="onDiscard()"
                    translate="{{ model.discardButtonText }}"></button>

Nun versuche ich das Element per @ViewChild zu referenzieren:

    @ViewChild( 'discardButton' )
    public discardButton: ElementRef;

Um dann das Element zu fokusieren:

    @Override()
    public ngAfterViewInit(): void {
        setTimeout( () => {
            $( this.discardButton.nativeElement ).focus();
        }, 100 );
    }

Nun ist discardButton keine Instanz von ElementRef, sondern von TranslateComponent.
Wenn ich die translate-Direktive entferne, dann funktioniert alles.

Currently it is not possible to use any pipe - it would be very helpful when it will work.

{
  "LOGIN": "Hello {{ name }}, your last login was on {{ lastLogin | date:'medium' }}"
}

I'm using angular-translator version v2.2.3

My IDE on Windows 10:

After upgrading npm packages of:

• angular from v4.3.2 to v4.3.6
• awesome-typescript-loader from v3.2.2 to v3.2.3
• tslint from v5.5.0 to v5.6.0
• typescript from v2.4.2 to v2.5.1

I'm receiving this "at-loader" error (awesome-typescript-loader):

[at-loader] Checking finished with 1 errors
[at-loader] ./node_modules/angular-translator/src/Translator.ts:30:83
TS2339: Property 'module' does not exist on type '{}'.

Do you noticed something similar?

Now I'm trying to downgrade the npm packages (one by one) to see whether the error disappear or not.

Hi,
I have updated my angular version to the newest version 6.0.8. I upgraded like it is advised on update.angular.io!

After the update I always get the following errors

The output of ng version is the following:

What is causing that error and how can I correct it?

I tried installing the module with angular2-quickstart project. I get this below error
npm WARN peerDependencies The peer dependency [email protected] included from angular2-translator will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency zone.js@^0.6.25 included from angular2-translator will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "angular2-translator"
npm ERR! node v4.5.0
npm ERR! npm v2.15.9
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants rxjs@^5.0.1
npm ERR! peerinvalid Peer @angular/[email protected] wants rxjs@^5.0.1
npm ERR! peerinvalid Peer @angular/[email protected] wants rxjs@^5.0.1
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants [email protected]

npm ERR! Please include the following file with any support request:
npm ERR! /Users/vishal.i.lad/Documents/workspace/ng2-translator-sample/npm-debug.log

May be you would want to have a look.

When they are not shared only the last subscriber gets the subscription.

In Translator the languageChanged is not fired when the language get changed in TranslatorContainer.

There are some type errors when running tsc in our project after installing your module:

node_modules/angular2-translator/angular2-translator/TranslateConfig.ts(50,13): error TS7005: Variable 'p' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateConfig.ts(52,39): error TS7006: Parameter 'languageString' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateConfig.ts(59,27): error TS7006: Parameter 'substring' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateConfig.ts(59,38): error TS7006: Parameter 'language' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateLoaderJson.ts(56,63): error TS7006: Parameter 'v' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(53,13): error TS7006: Parameter 'observer' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(176,13): error TS7005: Variable 'result' implicitly has an 'any[]' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(242,13): error TS7005: Variable 'varName' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(318,13): error TS7005: Variable 'j' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(320,13): error TS7005: Variable 'key' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(322,13): error TS7005: Variable 'paramKey' implicitly has an 'any' type.
node_modules/angular2-translator/angular2-translator/TranslateService.ts(323,13): error TS7005: Variable 'getter' implicitly has an 'any' type.

No other problems with your module. Besides these errors it seems to work fine.
Any idea how to fix this? Because it is making the output of tsc harder to read...

The documentation here is not up to date.

Under the headline "Setup angular module"

TranslatorModule.forRoot({
      defaultLang: "de",
      providedLangs: [ "de", "en" ],
      detectLanguageOnStart: false
    })

Should be:

TranslatorModule.forRoot({
      defaultLanguage: "de",
      providedLanguages: [ "de", "en" ],
      detectLanguageOnStart: false
    })

If they're not, the module fails to set the appropriate language when configuring the language elsewhere in the application and will stay in English.

Hi

We want to make a kind of easter egg implementation of a part of our system and wanted to make custom language (like 'pirate').
When we do that, it seems like it defaults back to english though.
Is there some kind of check on the format of the languages provided?
I can imagine this could also be an issue if you wanted localisation (like en_GB and en_US).
What should the format of localisation be?

Suggestion
Would it be possible to remove that restriction if there are any?

Now that I'm testing my app using I find out it would be helpful to have a fake translation loader that just returns an empty object.

With this loader we can guarantee that the translation is the provided key.

Its very easy too:

export class TranslationLoaderFake extends TranslationLoader {
  public load(): Promise<object> {
    return Promise.resolve({});
  }
}

We could also move the flattenTranslations method to the abstract class TranslationLoader and make it protected. This way the TranslationLoaderFake can use this method too what gives a nice difference too:

export class TranslationLoaderFake extends TranslationLoader {
  protected translations: any;

  constructor(translations: any = {}) {
    this.translations = this.flattenTranslations(translations);
    super();
  }

  public load(): Promise<object> {
    return Promise.resolve(this.translations);
  }
}

beforeEach(async(() => {
  TestBed.ConfigureTestingModule({
    imports: [
      TranslatorModule.forRoot({ loader: TranslationLoaderFake });
    ],
    providers: [
      { provide: TranslationLoaderFake, useValue: new FakeTranslationLoader(require('../assets/i18n/en.json')) },
    ],
  });
}));

Hi,

I don't want to set up a board for this small project. Anyway I really like your feedback.

If you have questions, feature requests or other issues - please open a new issue. If you have feedback for the new release feel free to post a comment.

Thanks for all the stars 👍 😄

Best regards

The only injectables we want to have are the TranslateService and the TranslateConfig. In the TranslateConfig we also have to configure the TranslateLoader. The goal is to make configuration easier and external:

The config:

import {TranslateConfig, TranslateLoaderJson} from 'angular2-translator';

export const translateConfig = new TranslateConfig({
  defaultLang: 'de',
  providedLangs: ['de', 'en'],
  loader: TranslateLoaderJson,
  loaderConfig: {
    path: 'i18n',
    extension: '-lang.json'
  },
  modules: {
    'admin': {}
  }
});

Hi,
I was using Angular 4.2 and recently upgraded to 7.0 and looks like the translator broke. Whenever I try to load a page that makes use of the translate pipe it throws the error.

The stacks reads as follows:

ERROR Error: Uncaught (in promise): TypeError: (intermediate value).share is not a function
TypeError: (intermediate value).share is not a function
at new TranslatorContainer (angular-translator.js:899)
at _createClass (core.js:17836)
at _createProviderInstance (core.js:17804)
at resolveNgModuleDep (core.js:17768)
at callFactory (core.js:17853)
at createProviderInstance (core.js:17807)
at resolveNgModuleDep (core.js:17768)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:18476)
at resolveDep (core.js:18847)
at createClass (core.js:18723)
at new TranslatorContainer (angular-translator.js:899)
at _createClass (core.js:17836)
at _createProviderInstance (core.js:17804)
at resolveNgModuleDep (core.js:17768)
at callFactory (core.js:17853)
at createProviderInstance (core.js:17807)
at resolveNgModuleDep (core.js:17768)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:18476)
at resolveDep (core.js:18847)
at createClass (core.js:18723)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:14182)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

I have this strage error message, when I run npm start

ERROR in Error encountered resolving symbol values statically. Calling function 'TranslateConfig', function calls are not supported. Consider replacing the function or lambda
 with a reference to an exported function, resolving symbol AppModule 

Note: When I change a source file, then webpack will be recompiled successfully.

any ideas?
node : v7.5.0
npm: 4.2.0
os: mac os 10.12.3

Full log

ash-3.2$ npm start

> [email protected] start /Users/robert/repository/nextlevel17/nextlevel-client
> ng serve

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
** NG Live Development Server is running on http://localhost:4200. **
Hash: f56ebb1d8cad504b0fcf
Time: 8390ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 228 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 4.59 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.66 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'TranslateConfig', function calls are not supported. Consider replacing the function or lambda
 with a reference to an exported function, resolving symbol AppModule in /Users/robert/repository/nextlevel17/nextlevel-client/src/app/app.module.ts, resolving symbol AppModu
le in /Users/robert/repository/nextlevel17/nextlevel-client/src/app/app.module.ts
webpack: Failed to compile.
webpack: Compiling...
Hash: f56ebb1d8cad504b0fcf
Time: 1330ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 228 kB {4} [initial]
chunk    {1} main.bundle.js, main.bundle.map (main) 4.59 kB {3} [initial]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.66 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: Compiled successfully.

package.json

{
  "name": "nextlevel-client",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "angular2-translator": "^1.3.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
// import { LanguageComponent } from './language.components';
import { TranslatorModule, TranslateConfig, TranslateService, TranslatePipe } from 'angular2-translator/angular2-translator';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TranslatorModule
  ],

  providers: [
    {
        provide: TranslateConfig, useValue: new TranslateConfig({
        defaultLang: "de",
        providedLangs: ["de", "en"],
        detectLanguageOnStart: true
      })

    },

    TranslatePipe,
    TranslateService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

When having the following code:

        this.translateService.languageChanged.subscribe(() => {
            this.translateService.waitForTranslation().then(() => {
                let textToDisplay = this.translateService.instant('bla') as string;
            });
        });

Is waitForTranslation necessary again? And why is languageChanged not called when the first language loads? Seems unnecessary to write something like:

        this.translateService.waitForTranslation().then(() => {
            let textToDisplay= this.translateService.instant('bla') as string;
        });
        this.translateService.languageChanged.subscribe(() => {
            this.translateService.waitForTranslation().then(() => {
                let textToDisplay= this.translateService.instant('bla') as string;
            });
        });

Thx and kind regards :)

When I run ng build with angular 4.2.3 then I get the following error:

Hash: 657aa3bb4f96faf4a576
Time: 24526ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 244 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.5 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in D:/projects/komed-health-web/node_modules/angular-translator/src/TranslatorConfig.ts (64,34): Supplied parameters do not match any signature of call target.

ERROR in D:/projects/komed-health-web/node_modules/angular-translator/src/TranslatorConfig.ts (134,34): Supplied parameters do not match any signature of call target.

Here is my full package.json dependencies:

  "dependencies": {
    "@angular/animations": "4.2.3",
    "@angular/common": "4.2.3",
    "@angular/compiler": "4.2.3",
    "@angular/core": "4.2.3",
    "@angular/forms": "4.2.3",
    "@angular/http": "4.2.3",
    "@angular/platform-browser": "4.2.3",
    "@angular/platform-browser-dynamic": "4.2.3",
    "@angular/platform-server": "4.2.3",
    "@angular/router": "4.2.3",
    "@angular/service-worker": "1.0.0-beta.16",
    "@codebakery/origami": "1.2.2",
    "@types/socket.io-client": "1.4.29",
    "angular-translator": "2.1.0",
    "core-js": "2.4.1",
    "rollup": "0.43.0",
    "rollup-plugin-commonjs": "8.0.2",
    "rollup-plugin-node-resolve": "3.0.0",
    "rxjs": "5.4.1",
    "tributejs": "2.3.7",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.1.2",
    "@angular/compiler-cli": "4.2.3",
    "@types/jasmine": "2.5.52",
    "@types/node": "8.0.0",
    "codelyzer": "3.0.1",
    "cpr": "2.1.0",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "polymer-cli": "1.2.0",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "ts-node": "3.0.6",
    "tslint": "5.4.3",
    "typescript": "2.3.4"
  }

Because first the translation is made for only the key when using TranslateComponent it throws an error if you access a function from this params in the translation.

Contributions would be highly appreciated, thanks in advance!

What to say? It throws errors when compiling and the tests don't run when installing angular 5...

At the moment I'm not developing a frontend and I'm not up to date what has changed... I don't know if angular 5 has any advantages - it's just breaking my code.

Hi there

Somehow I always receive the following error: EXCEPTION: Unexpected token < in JSON at position 0. So maybe someone could help me out with my project config and tell me if I'm missing something? I'm using webpack at the moment...

app/app.module.ts:

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from "@angular/http";
import {PolymerElement} from '@vaadin/angular2-polymer';
import {TranslateConfig, TranslatorModule, TranslateLoaderJsonConfig} from 'angular2-translator/angular2-translator';

import {AppComponent} from "./app.component";
import {AuthComponent} from "./auth/auth.component";
import {routing} from "./app.routing";
import {AuthService} from "./auth/auth.service";
import {HomeModule} from "./home/home.module";

@NgModule({
    declarations: [
        AppComponent,
        AuthComponent,
        PolymerElement('paper-icon-button')
    ],
    imports: [
        BrowserModule,
        routing,
        HttpModule,
        HomeModule,
        TranslatorModule
    ],
    providers: [{
        provide: TranslateConfig, useValue: new TranslateConfig({
            defaultLang: 'en',
            providedLangs: ['en', 'de'],
        })
    }, {
        provide: TranslateLoaderJsonConfig, useValue: new TranslateLoaderJsonConfig('i18n', '-lang.json')
    },
        AuthService
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {

}

app.component.ts:

import {Component} from '@angular/core';
import {TranslateService} from 'angular2-translator/angular2-translator';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styles: [`
    app-toolbar {
      background: var(--primary-color);
      color: var(--dark-theme-text-color);
    }
  `]
})
export class AppComponent {
    constructor(translate: TranslateService) {
        translate.translate("TEXT").then(
            (translation) => console.log(translation)
        );
    }
}

en-lang.json:

{
  "TEXT": "asdf"
}

Can't subscribe to languageChanged Observable:

I'm new to npm, angular2 & angular-cli. I simply created a new app using "ng new" and then added angular-translator with npm - exactly as described in the docs. And here's my setup:

@angular/cli: 1.0.0
node: 7.8.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

In my package.json I have:

"angular2-translator": "^1.4.2",

And when I do ng build, I get this:

ERROR in Error encountered resolving symbol values statically. Calling function 'TranslateConfig', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol TranslatorModule in C:/Users/michaelv/Dev/TestSite4/node_modules/angular2-translator/src/TranslatorModule.ts, resolving symbol TranslatorModule in C:/Users/michaelv/Dev/TestSite4/node_modules/angular2-translator/src/TranslatorModule.ts

Not sure what I'm doing wrong. I see that there have been similar issues reported recently but also that v1.4 should have addressed that. Am I doing something wrong or does angular-translator simply not work with the latest angular-cli?

Now that Angular-Cli has a release candidate and it is the suggested method on angular.io to start a new angular project we should also support this method.

When you have {{count}} in your translation and count is 0 then it gets replaced by empty string. It should be 0 instead. A JavaScript and/or TypeScript developer expecting this behaviour:

node:

$ node
> String(0)
'0'
> ''+0
'0'

Maybe we could replace the translator.translate('TEXT') from returning a promise to an observable. That way the UI would always automatically update when TranslatorContainer changes the language.

Or add an additional one

A module is a subset of translations. The idea is to store translations in different files and load them when you enter this module. For example you need only text for managing your own content but when you enter the administration area you may need additional text like "CHANGE_USER_QUOTA".

Basically it should be configurable in the TranslateConfig:

import {TranslateConfig, TranslateLoaderJson} from 'angular2-translator';

export const translateConfig = new TranslateConfig({
  defaultLang: 'de',
  providedLangs: ['de', 'en'],
  loader: TranslateLoaderJson,
  loaderConfig: {
    path: 'i18n',
    extension: '-lang.json'
  },
  modules: {
    'admin': {
      path: '{{parent}}/admin',    // default
      extension: '{{parent}}',     // default
    },
    'messages': {} // use defaults
  }
});

To use the module from TranslateService:

import {Component} from "angular2/core";
import {TranslateService} from "angular2-translator";

@Component({
    selector: "my-app",
    template: "<h1>{{ title }}</h1"
})
export class ChangeQuotaComponent {
    public title = 'CHANGE_USER_QUOTA';

    constructor(translate: TranslateService) {
        translate.module('admin')
            .translate(this.title)
            .then((title) => this.title = title);
    }
}

There is still a question how to use the module from component and pipe. I think we will have two options: add this parameter as translate-module="admin" or define it in the component or even in a parent component (I don't know if this is possible).

I have a translate object like:

{
    "date": {
        "month": {
            "jan": "Januar",
            "feb": "Februar",
            Lots, lots of data
        }
        "weekdays": {
            "sun": "Sonntag",
            "mon": "Montag",
            Lots, lots of data
         }
    even more data
    }
}

Then when calling this.translator.observe(['date.month.jan', 'date.month.feb']) I need to pass every single complete json endpoint

cooler would be if I could only pass: this.translator.observe(['date.month']) and I would get updated over all sub properties

Hi,

I'm getting this error when I'm running ng test

Failed: Can't resolve all parameters for Translator: (?, ?).

I'm importing it in my test files like this: import {Translator} from 'angular-translator

And adding it as a provider like this:

  beforeEach(async( () => {

    TestBed.configureTestingModule({
      declarations: [MyComponent, MyOtherComponent],
      imports: [FormsModule, RouterTestingModule, HttpModule],
      providers: [MyService, MyOtherService, Translator]
    });

Expected behaviour
No errors and tests to succeed.

Angular and CLI versions
Angular: 4.3.3
Angular CLI: 1.2.4

Am I missing something here?

ERROR in node_modules/angular-translator/src/TranslatorModule.d.ts:9:53 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

    static forRoot(options?: any, module?: string): ModuleWithProviders;
                                          

got above error when updated Angular version 10.2

Change the name to angular-translator because angular2 is just a version name and now they have 4 so we need to support this too.

Please note that everything will change:

• the repository: https://github.com/tflori/angular-translator
• the npm package: https://www.npmjs.com/package/angular-translator
• the bundle file: bundles/angular-translator.js

You will have to update all of your ts files from:

import { * } from "angular2-translator";

to

import { * } from "angular-translator";