chore(deps): Upgraded to Angular 4.0.1

Upgrade to Angular 4.0.1 and Material 2.0.0-beta.3

package.json

@@ -12,14 +12,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/material": "^2.0.0-beta.2",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/animations": "^4.0.1",
+    "@angular/common": "^4.0.1",
+    "@angular/compiler": "^4.0.1",
+    "@angular/core": "^4.0.1",
+    "@angular/forms": "^4.0.1",
+    "@angular/http": "^4.0.1",
+    "@angular/material": "^2.0.0-beta.3",
+    "@angular/platform-browser": "^4.0.1",
+    "@angular/platform-browser-dynamic": "^4.0.1",
     "@angular/router": "^4.0.0",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^2.0.2",
@@ -30,7 +31,7 @@
   },
   "devDependencies": {
     "@angular/cli": "1.0.0",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.1",
     "@ngrx/store-devtools": "^3.2.4",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
@@ -21,6 +22,7 @@ import { SearchResultsComponent } from './search-results.component';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     ReactiveFormsModule,
     HttpModule,
     MaterialModule,

src/app/book-search.component.ts

@@ -1,6 +1,6 @@
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/filter';
-import { Component, Output, Input, EventEmitter } from '@angular/core';
+import { Component, Output, Input, EventEmitter, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -26,7 +26,7 @@ import { FormControl } from '@angular/forms';
     }
   `]
 })
-export class BookSearchComponent {
+export class BookSearchComponent implements OnInit {
   searchTerms: FormControl = new FormControl();
 
   @Input() set value(val: string) {
@@ -39,7 +39,7 @@ export class BookSearchComponent {
     this.searchTerms
       .valueChanges
       .debounceTime(500)
-      .filter(terms => terms != '' && terms !== this.value)
+      .filter(terms => terms !== '' && terms !== this.value)
       .subscribe(this.search);
   }
 }

src/app/google-books.service.ts

@@ -20,7 +20,7 @@ export class GoogleBooksService {
         } else {
           return this.http.get('/assets/empty.json');
         }
-      })    
+      })
       .map(res => res.json().items || []);
   }
 }

src/styles.css

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 * {
   box-sizing: border-box;