feat(Devtools): Add store-devtools integration

Author: MikeRyanDev

package.json

@@ -27,26 +27,29 @@
     "npm": ">= 3"
   },
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/compiler": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1",
-    "@angular/http": "^2.0.0-rc.1",
-    "@angular/platform-browser": "^2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
-    "@angular2-material/button": "2.0.0-alpha.5-2",
-    "@angular2-material/card": "2.0.0-alpha.5-2",
-    "@angular2-material/core": "2.0.0-alpha.5-2",
-    "@angular2-material/list": "2.0.0-alpha.5-2",
-    "@angular2-material/icon": "2.0.0-alpha.5-2",
-    "@angular2-material/input": "2.0.0-alpha.5-2",
-    "@angular2-material/sidenav": "2.0.0-alpha.5-2",
-    "@angular2-material/toolbar": "2.0.0-alpha.5-2",
+    "@angular/common": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.4",
+    "@angular/forms": "^0.2.0",
+    "@angular/http": "2.0.0-rc.4",
+    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular2-material/button": "2.0.0-alpha.6",
+    "@angular2-material/card": "2.0.0-alpha.6",
+    "@angular2-material/core": "2.0.0-alpha.6",
+    "@angular2-material/icon": "2.0.0-alpha.6",
+    "@angular2-material/input": "2.0.0-alpha.6",
+    "@angular2-material/list": "2.0.0-alpha.6",
+    "@angular2-material/sidenav": "2.0.0-alpha.6",
+    "@angular2-material/toolbar": "2.0.0-alpha.6",
     "@ngrx/core": "^1.0.0",
     "@ngrx/db": "^1.1.0",
     "@ngrx/effects": "^1.0.1",
     "@ngrx/router": "^1.0.0-beta.1",
     "@ngrx/router-store": "0.0.1",
     "@ngrx/store": "^2.0.0",
+    "@ngrx/store-devtools": "^2.0.0-beta.1",
+    "@ngrx/store-log-monitor": "^2.0.0-beta.1",
     "core-js": "^2.2.2",
     "ngrx-store-logger": "^0.1.4",
     "normalize.css": "^4.1.1",

src/app.ts

@@ -4,7 +4,7 @@ import { MdToolbar } from '@angular2-material/toolbar';
 import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';
 import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
-
+import { StoreLogMonitorComponent } from '@ngrx/store-log-monitor';
 
 @Component({
   selector: 'app',
@@ -14,7 +14,8 @@ import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
     MdToolbar,
     MD_SIDENAV_DIRECTIVES,
     MdIcon,
-    MD_LIST_DIRECTIVES
+    MD_LIST_DIRECTIVES,
+    StoreLogMonitorComponent
   ],
   providers: [ MdIconRegistry ],
   styles: [`
@@ -29,6 +30,7 @@ import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 
     md-sidenav-layout {
       background: rgba(0, 0, 0, .03);
+      right: 30% !important; // Make space for the devtools, demo only
     }
 
     md-sidenav {
@@ -61,6 +63,7 @@ import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
       <route-view></route-view>
 
     </md-sidenav-layout>
+    <ngrx-store-log-monitor toggleCommand="ctrl-t"></ngrx-store-log-monitor>
   `
 })
 export default class App { }

src/main.browser.ts

@@ -1,10 +1,13 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { HashLocationStrategy } from '@angular/common';
+import { disableDeprecatedForms, provideForms } from '@angular/forms';
 import { provideRouter } from '@ngrx/router';
 import { provideStore } from '@ngrx/store';
 import { provideDB } from '@ngrx/db';
 import { connectRouterToStore } from '@ngrx/router-store';
 import { runEffects } from '@ngrx/effects';
+import { instrumentStore } from '@ngrx/store-devtools';
+import { useLogMonitor } from '@ngrx/store-log-monitor';
 
 import App from './app';
 import routes from './routes';
@@ -60,10 +63,23 @@ bootstrap(App, [
    */
   provideDB(schema),
 
+  /**
+   * instrumentStore() sets up the @ngrx/store-devtools providers
+   */
+  instrumentStore({
+    monitor: useLogMonitor({
+      position: 'right',
+      visible: true
+    })
+  }),
+
   /**
    * Finall we provide additional services and action creators so they can
    * be used by all of our components, effects, and guards.
    */
   services,
-  actions
+  actions,
+
+  disableDeprecatedForms(),
+  provideForms()
 ]);