(feat): BREAKING CHANGE Switch to HttpClient

README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/localize-router-http-loader.svg)](https://www.npmjs.com/package/localize-router-http-loader)
 > A loader for [localize-router](https://github.com/Greentube/localize-router) that loads config using Http
 
-> This package is built for angular version <4.3
+> This package is built for angular version >=4.3. If you are still using old Angular please use `localize-router-http-loader` version <1.0.0
 
 - [Installation](#installation)
 - [Usage](#usage)
@@ -23,15 +23,15 @@ In order to load `localize-router` config via http, you must initialize Localize
 
 ```ts
 // Required for AoT
-export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: Http) {
+export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
   return new LocalizeRouterHttpLoader(translate, location, settings, http);
 }
 
 LocalizeRouterModule.forRoot(routes, {
     parser: {
         provide: LocalizeParser,
         useFactory: HttpLoaderFactory,
-        deps: [TranslateService, Location, LocalizeRouterSettings, Http]
+        deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
     }
 })
 ```
@@ -41,7 +41,7 @@ LocalizeRouterModule.forRoot(routes, {
 `LocalizeRouterHttpLoader` has one optional parameter `path` which points to json config file. Default value is `assets/locales.json`.
 
 ```ts
-export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: Http) {
+export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
   return new LocalizeRouterHttpLoader(translate, location, settings, http, 'my/custom/url/to/file.json');
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "localize-router-http-loader",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "A loader for localize-router that loads config using Http",
   "scripts": {
     "clean": "rimraf bundles coverage src/**/*.d.ts src/**/*.metadata.json src/**/*.js tests/**/*.d.ts tests/**/*.metadata.json tests/**/*.js index.d.ts index.metadata.json index.js",
@@ -29,23 +29,22 @@
   "typings": "index.d.ts",
   "homepage": "https://github.com/Greentube/localize-router-http-loader",
   "peerDependencies": {
-    "@angular/common": ">=2.0.0",
-    "@angular/core": ">=2.0.0",
-    "@angular/http": ">=2.0.0",
+    "@angular/common": ">=4.3.0",
+    "@angular/core": ">=4.3.0",
     "@ngx-translate/core": ">=6.0.0",
     "localize-router": ">=1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@angular/animations": "4.1.0",
-    "@angular/common": "4.1.0",
-    "@angular/compiler": "4.1.0",
-    "@angular/compiler-cli": "4.1.0",
-    "@angular/core": "4.1.0",
-    "@angular/http": "4.1.0",
-    "@angular/platform-browser": "4.1.0",
-    "@angular/platform-browser-dynamic": "4.1.0",
-    "@angular/platform-server": "4.1.0",
-    "@angular/router": "4.1.0",
+    "@angular/animations": "4.3.6",
+    "@angular/common": "4.3.6",
+    "@angular/compiler": "4.3.6",
+    "@angular/compiler-cli": "4.3.6",
+    "@angular/core": "4.3.6",
+    "@angular/http": "4.3.6",
+    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-server": "4.3.6",
+    "@angular/router": "4.3.6",
     "@ngx-translate/core": "7.0.0",
     "@types/es6-promise": "0.0.32",
     "@types/hammerjs": "2.0.34",

src/http-loader.ts

@@ -1,6 +1,6 @@
 import { LocalizeParser, LocalizeRouterSettings } from 'localize-router';
 import { TranslateService } from '@ngx-translate/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Routes } from '@angular/router';
 import { Location } from '@angular/common';
 
@@ -21,7 +21,7 @@ export class LocalizeRouterHttpLoader extends LocalizeParser {
    * @param http
    * @param path
    */
-  constructor(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, private http: Http, private path: string = 'assets/locales.json') {
+  constructor(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, private http: HttpClient, private path: string = 'assets/locales.json') {
     super(translate, location, settings);
   }
 
@@ -32,14 +32,13 @@ export class LocalizeRouterHttpLoader extends LocalizeParser {
    */
   load(routes: Routes): Promise<any> {
     return new Promise((resolve: any) => {
+      console.log(this.http, this.http.get);
       this.http.get(`${this.path}`)
-        .map((res: Response) => res.json())
         .subscribe((data: ILocalizeRouterParserConfig) => {
           this.locales = data.locales;
           this.prefix = data.prefix || '';
           this.init(routes).then(resolve);
         });
     });
   }
-
 }

tests/http-loader.spec.ts

@@ -7,9 +7,9 @@ import {
   ALWAYS_SET_PREFIX, CACHE_MECHANISM, CACHE_NAME, CacheMechanism, DEFAULT_LANG_FUNCTION,
   LocalizeRouterSettings, USE_CACHED_LANG
 } from 'localize-router';
-import { Http, HttpModule, ResponseOptions, Response, XHRBackend } from '@angular/http';
 import { Location } from '@angular/common';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpClient } from '@angular/common/http';
 
 class FakeTranslateService {
 
@@ -27,15 +27,14 @@ describe('LocalizeRouterHttpLoader try 2', () => {
   let translate: TranslateService;
   let location: Location;
   let settings: LocalizeRouterSettings;
-  let http: Http;
+  let http: HttpClient;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [CommonModule, HttpModule],
+      imports: [CommonModule, HttpClientTestingModule],
       providers: [
         { provide: TranslateService, useClass: FakeTranslateService },
         { provide: Location, useClass: FakeLocation },
-        { provide: XHRBackend, useClass: MockBackend },
         { provide: USE_CACHED_LANG, useValue: true },
         { provide: DEFAULT_LANG_FUNCTION, useValue: void 0 },
         { provide: CACHE_NAME, useValue: 'LOCALIZE_DEFAULT_LANGUAGE' },
@@ -48,69 +47,70 @@ describe('LocalizeRouterHttpLoader try 2', () => {
     translate = injector.get(TranslateService);
     location = injector.get(Location);
     settings = injector.get(LocalizeRouterSettings);
-    http = injector.get(Http);
+    http = injector.get(HttpClient);
     loader = new LocalizeRouterHttpLoader(translate, location, settings, http);
   });
 
-  it('should set locales and prefix from file', inject([XHRBackend], (backend: MockBackend) => {
+  afterEach(inject([HttpTestingController], (httpMock: HttpTestingController) => {
+    injector = undefined;
+    translate = undefined;
+    location = undefined;
+    http = undefined;
+    loader = undefined;
+
+    httpMock.verify();
+  }));
+
+  it('should set locales and prefix from file', inject([HttpTestingController], (httpMock: HttpTestingController) => {
     const mockResponse = {
       locales: ['en', 'de', 'fr'],
       prefix: 'PREFIX'
     };
     const myPromise = Promise.resolve();
-    spyOn(http, 'get').and.callThrough();
     spyOn(<any> loader, 'init').and.returnValue(myPromise);
 
-    backend.connections.subscribe((connection: MockConnection) => {
-      connection.mockRespond(new Response(new ResponseOptions({
-        body: JSON.stringify(mockResponse),
-      })));
-    });
+    const promise = loader.load([]);
+
+    const req = httpMock.expectOne('assets/locales.json');
+    expect(req.request.method).toEqual('GET');
+    req.flush(mockResponse);
 
-    loader.load([]).then(() => {
-      expect(http.get).toHaveBeenCalledWith('assets/locales.json');
+    promise.then(() => {
       expect((<any> loader).init).toHaveBeenCalledWith([]);
       expect(loader.locales).toEqual(mockResponse.locales);
       expect((<any> loader).prefix).toEqual(mockResponse.prefix);
     });
   }));
 
-  it('should set default value for prefix if not provided', inject([XHRBackend], (backend: MockBackend) => {
+  it('should set default value for prefix if not provided', inject([HttpTestingController], (httpMock: HttpTestingController) => {
     const mockResponse = {
       locales: ['en', 'de', 'fr']
     };
     const myPromise = Promise.resolve();
     spyOn(<any> loader, 'init').and.returnValue(myPromise);
 
-    backend.connections.subscribe((connection: MockConnection) => {
-      connection.mockRespond(new Response(new ResponseOptions({
-        body: JSON.stringify(mockResponse),
-      })));
-    });
+    const promise = loader.load([]);
+    const req = httpMock.expectOne('assets/locales.json');
+    expect(req.request.method).toEqual('GET');
+    req.flush(mockResponse);
 
-    loader.load([]).then(() => {
+    promise.then(() => {
       expect((<any> loader).prefix).toEqual('');
     });
   }));
 
-  it('should load config from custom path', inject([XHRBackend], (backend: MockBackend) => {
+  it('should load config from custom path', inject([HttpTestingController], (httpMock: HttpTestingController) => {
     const mockResponse = {
       locales: ['en', 'de', 'fr']
     };
     const customPath = 'my/custom/path/to/config.json';
     const myPromise = Promise.resolve();
     loader = new LocalizeRouterHttpLoader(translate, location, settings, http, customPath);
     spyOn(<any> loader, 'init').and.returnValue(myPromise);
-    spyOn(http, 'get').and.callThrough();
-
-    backend.connections.subscribe((connection: MockConnection) => {
-      connection.mockRespond(new Response(new ResponseOptions({
-        body: JSON.stringify(mockResponse),
-      })));
-    });
 
-    loader.load([]).then(() => {
-      expect(http.get).toHaveBeenCalledWith(customPath);
-    });
+    loader.load([]);
+    const req = httpMock.expectOne(customPath);
+    expect(req.request.method).toEqual('GET');
+    req.flush(mockResponse);
   }));
 });