fix(TranslateService): Reverted the use of Injector and changed Angul…

…ar 2 requirement to ~beta.0 ins

It was not a good idea to use the Injector to load Http, the real problem was that Ionic 2 uses

Angular 2 beta.0 and ng2-translate uses Angular 2 beta.1. The ionic 2 cli was packaging 2 different

instances of Angular 2 and ng2-translate couldn't get Http because the provider it used wasn't the

same as the one from the main Ionic 2 application. Changing the requirement to ~beta.0 fixes that

problem.

README.md

@@ -25,8 +25,11 @@ It is recommended to instantiate `TranslateService` in the bootstrap of your app
 If you add it to the "providers" property of a component it will instantiate a new instance of the service that won't be initialized.
 
 ```js
+import {HTTP_PROVIDERS} from 'angular2/http';
+
 bootstrap(AppComponent, [
-    TranslateService // not required, but recommanded to have 1 unique instance of your service
+    HTTP_PROVIDERS,
+    TranslateService // not required, but recommended to have 1 unique instance of your service
 ]);
 
 

package.json

@@ -26,7 +26,7 @@
   "typings": "./ng2-translate.d.ts",
   "homepage": "https://github.com/ocombe/ng2-translate",
   "dependencies": {
-    "angular2": "~2.0.0-beta.1",
+    "angular2": "~2.0.0-beta.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",

src/translate.service.ts

@@ -1,5 +1,5 @@
-import {Injectable, EventEmitter, Injector} from 'angular2/core';
-import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
+import {Injectable, EventEmitter} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
 import {Observable} from 'rxjs/Observable'
 import 'rxjs/add/observable/fromArray.js';
 import 'rxjs/add/operator/share.js';
@@ -68,13 +68,8 @@ export class TranslateService {
     private defaultLang: string = 'en';
     private langs: Array<string>;
     private parser: Parser = new Parser();
-    private http: Http;
 
-    constructor() {
-        // We make sure that HTTP_PROVIDERS has been created & instantiated
-        // because sometimes it hasn't been provided in bootstrap
-        var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
-        this.http = injector.get(Http);
+    constructor(private http: Http) {
         this.useStaticFilesLoader();
     }
 

tests/translate.service.spec.ts

@@ -1,9 +1,46 @@
+import {it, beforeEachProviders, inject} from "angular2/testing";
+import {provide} from "angular2/core";
+import {
+    BaseRequestOptions, Http, ResponseOptions, Response, HTTP_PROVIDERS, Connection,
+    XHRBackend
+} from "angular2/http";
+import {MockBackend, MockConnection} from "angular2/http/testing";
 import {TranslateService} from '../src/translate.service';
 
 export function main() {
+
     describe('TranslateService', () => {
+        beforeEachProviders(() => [
+            BaseRequestOptions,
+            HTTP_PROVIDERS,
+            // Provide a mocked (fake) backend for Http
+            provide(XHRBackend, {useClass: MockBackend}),
+            TranslateService
+        ]);
+
+
         it('is defined', () => {
             expect(TranslateService).toBeDefined();
         });
+
+        // this test is async, and yet it works thanks to Zone \o/
+        it('should be able to get translations for the view', inject([XHRBackend, Http, TranslateService], (xhrBackend, http, translate) => {
+            var connection: MockConnection; //this will be set when a new connection is emitted from the backend.
+            xhrBackend.connections.subscribe((c: MockConnection) => connection = c);
+
+            // this will load translate json files from src/public/i18n
+            translate.useStaticFilesLoader();
+
+            // the lang to use, if the lang isn't available, it will use the current loader to get them
+            translate.use('en');
+
+            // this will request the translation from the backend because we use a static files loader for TranslateService
+            translate.get('TEST').subscribe((res: string) => {
+                expect(res).toEqual('This is a test');
+            });
+
+            // mock response after the xhr request, otherwise it will be undefined
+            connection.mockRespond(new Response(new ResponseOptions({body: '{"TEST": "This is a test"}'})));
+        }));
     });
 }