angular2 translate in angular cli build about angular-l10n HOT 8 CLOSED

Hi everyone. You must apply these instructions to the version of angular-cli that uses SystemJs. The new angular-cli@webpack version does not need to set anything. See library specification and official documentation.

from angular-l10n.

Ok, please note that this isn't the official Angular solution for i18n (it is not ready yet), and only for translating ng2-translate is more popular.
However, to install this library you can follow the following steps:

1 - Install angular-cli and create a new app (https://github.com/angular/angular-cli):

npm install -g angular-cli

ng new MyApp

2 - Install the library:

cd MyApp

npm install angular2localization --save

If you see some npm-warn, it's because angular-cli is not updated to Angular 2.0.0-rc.4, but it is not a problem (you can update it in package.json).

3 - Add the library to angular-cli-build.js file to vendorNpmFiles array (https://github.com/angular/angular-cli/wiki/3rd-party-libs):

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'angular2localization/**/*.+(js|js.map)'
    ]
  });
};

4 - Configure SystemJS mappings to know where to look for the library: move to MyApp > src folder and add to system.config.js file:

/** Map relative paths to URLs. */
const map: any = {
  'angular2localization': 'vendor/angular2localization'
};

/** User packages configuration. */
const packages: any = {
  'angular2localization': { format: 'cjs', defaultExtension: 'js' }
};

A very basic usage of the library:

src > app > main.ts file:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS} from '@angular/http';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [HTTP_PROVIDERS]);

src > app > app.component.ts file:

import { Component } from '@angular/core';

import {
  LocaleService,
  LocalizationService,
  TranslatePipe } from 'angular2localization/angular2localization';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [LocaleService, LocalizationService], // Inherited by all descendants.
  pipes: [TranslatePipe]
})
export class AppComponent {

  constructor(public locale: LocaleService, public localization: LocalizationService) {

    // Adds a new language (ISO 639 two-letter or three-letter code).
    this.locale.addLanguage('en');
    // Add a new language here.

    // Required: default language and expiry (No days). If the expiry is omitted, the cookie becomes a session cookie.
    this.locale.definePreferredLanguage('en', 30);

    // DIRECT LOADING
    var translationEN = {
      TITLE: 'Angular 2 Localization with Angular command line'
    }
    // Add a new translation here.

    // Required: adds a new translation with the given language code.
    this.localization.addTranslation('en', translationEN);
    // Add a new translation with the given language code here.
    this.localization.updateTranslation(); // Need to update the translation.

  }

  // Gets the language code for the LocalizationService.
  get lang(): string {

    return this.localization.languageCode;

  }
}

src > app > app.component.html file:

<h1>
  {{ 'TITLE' | translate:lang }}
</h1>

Comment *.spec.ts files (they are used for testing).

Then run from command line:

ng build

ng serve

Wait for building and then visit: http://localhost:4200/

For more details about using of the library, look at the specifications. If you use an async loading, please note that you will need to put the json files in the ./dist folder.

I hope this helps.

Greetings

from angular-l10n.

Hi Robisim,

First i would like to thank you for spent your valuable time for this issue.Second thing you gave the steps very clearly from scratch..This works perfectly fine..I have one query..for importing this service to every component individually ,how about we import it in "main.ts" file.. and how to i keep separate files for each language instead we giving directly..

Thanks & Regards
Venky.

from angular-l10n.

Hi Venky,

Angular Team discourages the registration of a service during the bootstrap process in main.ts file as shown:

bootstrap(AppComponent, [HTTP_PROVIDERS, LocaleService, LocalizationService]); // DISCOURAGED (but works)

Everybody does it, but as we read in the official documentation:

It's just not a best practice. The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support.

For more information, see here.

The preferred approach is to register application providers in application components as in the example I showed you. When you do this in app.component.ts file:

@Component({
  ...
  providers: [LocaleService, LocalizationService], // Inherited by all descendants.
})
export class AppComponent {

  constructor(public locale: LocaleService, public localization: LocalizationService) {
  }
}

you are creating a reference to the services that will be inherited by all child components. In addition, if necessary, you can create new instances of the services, as in the case of lazy routing.

About your second question, the direct loading is only for example. For asynchronous loading via jsonfiles, you can follow the documentation I have already written about it: https://github.com/robisim74/angular2localization/blob/master/doc/spec.md#3.2.2. In your case, you will need to put the json files in the ./dist folder.

You also have available the sample application source code: https://github.com/robisim74/angular2localization/tree/gh-pages.

Greetings

Roberto

from angular-l10n.

Hi Roberto,

thanks for writing this as it fulfills a great need.
I installed it by using npm install angular2localization --save.
I see that the directory for it has been created under node_modules.
But when I try to use LocaleService (that's all I need for the moment), I get an Angular error: "DI exception...no provider for...LocaleService".
Then I look at the src code, and I don't see that LocaleService has an @Injectable annotation.
Any clues about why Injectable is missing -- did I miss a step?

Thanks
Aneela

from angular-l10n.

Hi Aneela,

LocaleService is injectable.

Please, check in your component if it has been added to providers:

@Component({
  ...
  providers: [LocaleService], // add here LocaleService
})

export class AppComponent {

  constructor(public locale: LocaleService) {
    ...
  }
}

In addition, if you are using angular-cli, check if the library has been copied to vendor in ./dist folder as explained above.

from angular-l10n.

Very helpful. Thanks.

from angular-l10n.

Use ng2-translate - https://github.com/ocombe/ng2-translate

Sample Project - https://github.com/ramsunvtech/angular-basic/tree/ng-2.x-cli

from angular-l10n.