HttpClient API upgrade instead of deprecated Http (PatrickJS#1923)

* HttpClient API upgrade instead of deprecated Http

* Fix for e2e tests as well as package-lock.json added for npm users (yarn is slow on windows)

package.json

@@ -87,7 +87,6 @@
     "@angular/compiler": "~5.0.1",
     "@angular/core": "~5.0.1",
     "@angular/forms": "~5.0.1",
-    "@angular/http": "~5.0.1",
     "@angular/platform-browser": "~5.0.1",
     "@angular/platform-browser-dynamic": "~5.0.1",
     "@angular/platform-server": "~5.0.1",

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, PreloadAllModules } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -54,7 +54,7 @@ type StoreType = {
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     RouterModule.forRoot(ROUTES, {
       useHash: Boolean(history.pushState) === false,
       preloadingStrategy: PreloadAllModules

src/app/home/home.component.spec.ts

@@ -3,15 +3,11 @@ import {
   inject,
   async,
   TestBed,
-  ComponentFixture
+  ComponentFixture,
+  getTestBed
 } from '@angular/core/testing';
 import { Component } from '@angular/core';
-import {
-  BaseRequestOptions,
-  ConnectionBackend,
-  Http
-} from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
 /**
  * Load the implementations that should be tested.
@@ -23,6 +19,9 @@ import { Title } from './title';
 describe(`Home`, () => {
   let comp: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
+  let injector: TestBed;
+  let service: AppState;
+  let httpMock: HttpTestingController;
 
   /**
    * async beforeEach.
@@ -31,24 +30,17 @@ describe(`Home`, () => {
     TestBed.configureTestingModule({
       declarations: [HomeComponent],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        BaseRequestOptions,
-        MockBackend,
-        {
-          provide: Http,
-          useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
-            return new Http(backend, defaultOptions);
-          },
-          deps: [MockBackend, BaseRequestOptions]
-        },
-        AppState,
-        Title,
-      ]
+      imports: [HttpClientTestingModule],
+      providers: [AppState, Title]
     })
-    /**
-     * Compile template and css.
-     */
-    .compileComponents();
+
+      /**
+       * Compile template and css.
+       */
+      .compileComponents();
+    injector = getTestBed();
+    service = injector.get(AppState);
+    httpMock = injector.get(HttpTestingController);
   }));
 
   /**

src/app/home/home.e2e.ts

@@ -12,7 +12,7 @@ describe('Home', () => {
 
   it('should have a title', async () => {
     let subject = await browser.getTitle();
-    let result  = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
+    let result  = 'Angular Starter by @gdi2290 from @TipeIO';
     expect(subject).toEqual(result);
   });
 

src/app/home/title/title.service.spec.ts

@@ -1,42 +1,35 @@
 import {
   inject,
-  TestBed
+  async,
+  TestBed,
+  ComponentFixture,
+  getTestBed
 } from '@angular/core/testing';
 import { Component } from '@angular/core';
-import {
-  BaseRequestOptions,
-  ConnectionBackend,
-  Http
-} from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Title } from './title.service';
 
 describe('Title', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    providers: [
-      BaseRequestOptions,
-      MockBackend,
-      {
-        provide: Http,
-        useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
-          return new Http(backend, defaultOptions);
-        },
-        deps: [MockBackend, BaseRequestOptions]
-      },
-      Title
-    ]}));
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [Title]
+    });
+  });
 
-  it('should have http', inject([ Title ], (title: Title) => {
+  it('should have http', inject([Title], (title: Title) => {
     expect(!!title.http).toEqual(true);
   }));
 
-  it('should get data from the server', inject([ Title ], (title: Title) => {
+  it('should get data from the server', inject([Title], (title: Title) => {
     spyOn(console, 'log');
     expect(console.log).not.toHaveBeenCalled();
 
     title.getData();
     expect(console.log).toHaveBeenCalled();
-    expect(title.getData()).toEqual({ value: 'AngularClass' });
+    title.getData().subscribe( (result) => {
+      expect(result).toEqual({ value: 'AngularClass' });
+    });
   }));
 
 });

src/app/home/title/title.service.ts

@@ -1,24 +1,18 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class Title {
 
   public value = 'Angular 2';
 
   constructor(
-    public http: Http
-  ) {}
+    public http: HttpClient
+  ) { }
 
   public getData() {
     console.log('Title#getData(): Get Data');
-    /**
-     * return this.http.get('/assets/data.json')
-     * .map(res => res.json());
-     */
-    return {
-      value: 'AngularClass'
-    };
+    return this.http.get('/assets/data.json');
   }
 
 }

src/app/home/x-large/x-large.directive.spec.ts

@@ -1,13 +1,15 @@
+import { By } from '@angular/platform-browser';
 import {
-  fakeAsync,
   inject,
+  fakeAsync,
   tick,
-  TestBed
+  async,
+  TestBed,
+  ComponentFixture,
+  getTestBed
 } from '@angular/core/testing';
 import { Component } from '@angular/core';
-import { BaseRequestOptions, Http } from '@angular/http';
-import { By } from '@angular/platform-browser';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
 /**
  * Load the implementations that should be tested.