Angular cli support

.npmignore

@@ -1,8 +1,8 @@
-/angular2-translator/*
-!/angular2-translator/*.ts
-/angular2-translator.*
-!/angular2-translator.ts
-!/angular2-translator.d.ts
+/src/*
+!/src/*.ts
+/index.*
+!/index.ts
+!/index.d.ts
 
 /coverage/
 /typings/

README.md

@@ -27,6 +27,7 @@ It supports interpolation so you can:
 ### Refer to other translations
 
 By referring to other translations you can make it easy to have everywhere the same text without copy and paste.
+
 ```json
 {
   "GREETING": "Hello {{name}}!",
@@ -54,6 +55,7 @@ translations (to make the files readable and better structured).
 ## How to use
 
 Simple basic usage:
+
 ```ts
 import {Component} from "angular2/core";
 import {TranslateService, TranslatePipe, TranslateComponent} from "angular2-translator";
@@ -70,17 +72,69 @@ export class AppComponent {
     }
 }
 ```
+
 To learn more have a look at [the documentation](https://tflori.github.io/angular2-translator/).
 
 ## How to install
 
 ### Via npm
+
 First you need to install the package. The easiest way is to install it via npm:
+
 ```bash
 npm install --save angular2-translator
 ```
 
-Then you need to tell systemjs where to load angular2-translator:
+### Manually
+
+You also can clone the repository and symlink the project folder or what ever:
+
+```bash
+git clone https://github.com/tflori/angular2-translator.git
+ln -s angular2-translator MyApp/libs/angular2-translator
+```
+
+> You should know what you do and don't follow this guide for installation.
+
+## How to use
+
+You have to set up your `NgModule` to import the `TranslatorModule` and may be configure it:
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { TranslateConfig, TranslatorModule } from "angular2-translator";
+
+import { AppComponent } from './app.component';
+
+export function translateConfigFactory() {
+    return new TranslateConfig({
+        defaultLang: "de",
+        providedLangs: [ "de", "en" ],
+        detectLanguageOnStart: false
+    });
+}
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    TranslatorModule,
+  ],
+  providers: [
+    { provide: TranslateConfig, useFactory: translateConfigFactory},
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+### Using SystemJs
+
+When you are using SystemJs you need to configure where to load angular2-translator:
+
 ```js
 System.config({
     map: {
@@ -89,31 +143,8 @@ System.config({
 });
 ```
 
-Or you load the file directly:
+Or load the file directly:
+
 ```html
 <script type="text/javascript" src="node_modules/angular2-translator/bundles/angular2-translator.js"></script>
 ```
-
-Now you have to set up your NgModule to use the `TranslatorModule` and may be configure it:
-```ts
-import {TranslateConfig, TranslatorModule} from "angular2-translator";
-
-@NgModule({
-    imports: [ TranslatorModule ],
-    providers: [
-      { provide: TranslateConfig, useValue: new TranslateConfig({
-        defaultLang: "de",
-        providedLangs: [ "de", "en" ],
-      })},
-    ]
-})
-export class AppModule {}
-```
-
-### Manually
-You also can clone the repository and symlink the project folder or what ever:
-```bash
-git clone https://gitlab.w00tserver.org:617/tflori/angular2-translator
-ln -s angular2-translator MyApp/libs/angular2-translator
-```
-> You should know what you do and don't follow this guide for installation.

bundle.js

@@ -27,7 +27,7 @@ var builder = new Builder({
 });
 
 builder
-  .buildStatic('angular2-translator', path.resolve(__dirname, 'bundles/', name + '.js'), {
+  .buildStatic('index', path.resolve(__dirname, 'bundles/', name + '.js'), {
     format: 'umd',
     minify: true,
     sourceMaps: true,

docs/TranslateConfig.md

@@ -22,7 +22,7 @@ new TranslateConfig({
 | defaultLang           | string   | `'en'`   | Defines the default language to be used if no language got set and language detection is disabled or does not detect a language. |
 | providedLangs         | string[] | `['en']` | Defines a list of the languages that are supported from you. The provided languages has to match your file names. To make language detection work you should use the ISO format 639-1 (e.g. 'en') or the IETF language tag (e.g. 'de-AT'). You don't have to use "-" and don't have to care about case sensitive. A language 'en/us' will also match a browser language en-US and vise versa - but the file has to be *path*\*en/us\**extension* then. |
 | detectLanguageOnStart | string   | `true`   | Defines whether the language should be detected by navigator.language(s) when TranslateService got initialized or not. |
-| navigatorLanguages    | string[] | -        | Holds an array of languages the browser accepts. Mostly it is exactly `navigator.languages` but for browsers that only define `navigator.language` it is `[navigator.language]`. If nothing is defined by the browser it is simply an empty array. |
+| navigatorLanguages    | string[] | -        | Holds an array of languages the browser accepts. Mostly it is exactly `navigator.languages` but for browsers that does not define `navigator.languages` it is one of `navigator.language`, `navigator.browserLanguage` or `navigator.userLanguage`. |
 
 ## The Methods
 
@@ -56,17 +56,32 @@ expect(translateConfig.langProvided('en-US')).toBe('EN/usa');
 This example shows how you usually use the TranslateConfig class:
 
 ```ts
-import {TranslateConfig, TranslatorModule} from "angular2-translator";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { TranslateConfig, TranslatorModule } from "angular2-translator";
 
-@NgModule({
-    imports: [ TranslatorModule ],
-    providers: [
-      { provide: TranslateConfig, useValue: new TranslateConfig({
+import { AppComponent } from './app.component';
+
+export function translateConfigFactory() {
+    return new TranslateConfig({
         defaultLang: "de",
         providedLangs: [ "de", "en" ],
         detectLanguageOnStart: false
-      })},
-    ]
+    });
+}
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    TranslatorModule,
+  ],
+  providers: [
+    { provide: TranslateConfig, useFactory: translateConfigFactory},
+  ],
+  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
 ```

docs/TranslateLoader.md

@@ -36,7 +36,7 @@ import {TranslateLoader} from "angular2-translator";
 
 @Injectable()
 export class TranslateLoaderStatic extends TranslateLoader {
-    private translations:object = {
+    private translations:Object = {
         en: {
             "HELLO WORLD": "Hello World!"
         },
@@ -68,20 +68,34 @@ To use this loader in your application you have to provide it for your applicati
 bootstrap can look like:
 
 ```ts
-import {TranslateConfig, TranslateLoader, TranslatorModule} from "angular2-translator";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { TranslateConfig, TranslateLoader, TranslatorModule } from "angular2-translator";
 
-import {TranslateLoaderStatic} from "./TranslateLoaderStatic";
+import { AppComponent } from './app.component';
+import { TranslateLoaderStatic } from "./TranslateLoaderStatic"
+
+export function translateConfigFactory() {
+  return new TranslateConfig({
+    defaultLang: "ru",
+    providedLangs: [ "de", "en", "fr", "ru" ],
+    detectLanguageOnStart: false
+  });
+}
 
 @NgModule({
-    imports: [ TranslatorModule ],
-    providers: [
-      { provide: TranslateConfig, useValue: new TranslateConfig({
-        defaultLang: "de",
-        providedLangs: [ "de", "en", "fr", "ru" ],
-        detectLanguageOnStart: false
-      })},
-      { provide: TranslateLoader, useClass: TranslateLoaderStatic },
-    ]
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    TranslatorModule,
+  ],
+  providers: [
+    { provide: TranslateConfig, useFactory: translateConfigFactory },
+    { provide: TranslateLoader, useClass: TranslateLoaderStatic },
+  ],
+  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
 ```

docs/TranslateLoaderJson.md

@@ -71,7 +71,10 @@ class TranslateLoaderJsonConfig {
 }
 ```
 
-Default values are `path = 'i18n'` and `extension = '.json'` .
+Default values are `path = 'assets/i18n'` and `extension = '.json'` .
+
+> **CAUTION:** the default values changed from version 1.4. Before the default path was `i18n` - so you either change
+> this in your config or move the files.
 
 ### Example with customized path and extension:
 Directory structure:
@@ -90,12 +93,28 @@ Directory structure:
 main.ts:
 
 ```ts
-import {TranslateLoaderJsonConfig, TranslatorModule} from "angular2-translator";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { TranslateLoaderJsonConfig, TranslatorModule } from "angular2-translator";
+
+import { AppComponent } from './app.component';
+
+export function translateLoaderConfigFactory() {
+    return new TranslateLoaderJsonConfig('app/localization', '-lang.json')
+}
 
 @NgModule({
-    imports: [ TranslatorModule ],
-    providers: [
-      { provide: TranslateLoaderJsonConfig, useValue: new TranslateLoaderJsonConfig('app/localization', '-lang.json') },
-    ]
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    TranslatorModule,
+  ],
+  providers: [
+      { provide: TranslateLoaderJsonConfig, useFactory: translateLoaderConfigFactory },
+  ],
+  bootstrap: [AppComponent]
 })
+export class AppModule { }
 ```

docs/TranslateLogHandler.md

@@ -11,13 +11,46 @@ implements this interface uses console.error() to log errors. The other two func
 ## Declartion
 
 ```ts
-interface TranslateLogHandler {
+export interface ITranslateLogHandler {
     error(message:string):void;
     info(message:string):void;
     debug(message:string):void;
 }
 ```
 
+The default TranslateLogHandler is:
+
+```ts
+export const TranslateLogHandler = <ITranslateLogHandler> {
+    debug: () => {},
+    error: (message) => console && console.error && console.error(message),
+    info: () => {},
+};
+```
+
+To overwrite this you can just write this in your app module:
+ ```ts
+import {TranslateLogHandler, ITranslateLogHandler, TranslatorModule} from "angular2-translator";
+
+export function translateLogFactory() {
+    return <ITranslateLogHandler> {
+        debug: () => {},
+        error: (message) => console && console.error && console.error(message),
+        info: () => {},
+    };
+}
+
+@NgModule({
+    imports: [ TranslatorModule ],
+    providers: [
+      { provide: TranslateLogHandler, useFactory: translateLogFactory},
+    ]
+})
+export class AppModule {}
+```
+
+> Unfortunately this leads to an error message for `ng serve` and `ng build`. Here is [the bug report](https://github.com/angular/angular/issues/15287).
+
 ## Error messages
 Currently there are just 4 error messages: