Banging through the errors

package.json

@@ -19,9 +19,9 @@
   },
   "version": "2.0.0",
   "dependencies": {
-    "@ngrx/core": "1.0.1",
-    "@ngrx/effects": "1.1.1",
-    "@ngrx/store": "2.0.1",
+    "@ngrx/core": "1.2.0",
+    "@ngrx/effects": "2.0.0",
+    "@ngrx/store": "2.2.1",
     "ionic-angular": "2.0.0-rc.0",
     "ionicons": "3.0.0",
     "@ionic/storage": "1.0.3",

src/app/app.component.ts

@@ -1,48 +1,50 @@
-import { Component, ViewChild } from '@angular/core';
-
+import { Component, ViewChild }          from '@angular/core';
 import { Platform, MenuController, Nav } from 'ionic-angular';
+import { StatusBar }                     from 'ionic-native';
+import { ClickerList, Page2 }            from '../pages';
+import { Config }                        from '../config/config';
 
-import { StatusBar } from 'ionic-native';
+@Component({
+  templateUrl: 'app.html',
+})
+export class ClickerApp {
 
-import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
-import { ListPage } from '../pages/list/list';
+  @ViewChild(Nav) private nav: Nav;
 
+  private rootPage: any;
+  private pages: Array<{ title: string, component: any }>;
+  private menu: MenuController;
+  private platform: Platform;
 
-@Component({
-  templateUrl: 'app.html'
-})
-export class MyApp {
-  @ViewChild(Nav) nav: Nav;
+  constructor(platform: Platform, menu: MenuController) {
 
-  // make HelloIonicPage the root (or first) page
-  rootPage: any = HelloIonicPage;
-  pages: Array<{title: string, component: any}>;
+    this.platform = platform;
+    this.menu = menu;
 
-  constructor(
-    public platform: Platform,
-    public menu: MenuController
-  ) {
+    this.rootPage = ClickerList;
     this.initializeApp();
 
     // set our app's pages
     this.pages = [
-      { title: 'Hello Ionic', component: HelloIonicPage },
-      { title: 'My First List', component: ListPage }
+      { title: 'Clickers', component: ClickerList },
+      { title: 'Goodbye Ionic', component: Page2 },
     ];
   }
 
-  initializeApp() {
+  private initializeApp(): void {
     this.platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
       StatusBar.styleDefault();
+      console.log('api URL ' + Config.apiURL);
+      console.log('api key ' + Config.apiKey);
     });
   }
 
-  openPage(page) {
+  public openPage(page: any): void {
     // close the menu when clicking a link from the menu
     this.menu.close();
     // navigate to the new page if it is not the current page
     this.nav.setRoot(page.component);
-  }
+  };
 }

src/app/app.module.ts

@@ -1,27 +1,30 @@
 import { NgModule } from '@angular/core';
 import { IonicApp, IonicModule } from 'ionic-angular';
-import { MyApp } from './app.component';
-import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
-import { ItemDetailsPage } from '../pages/item-details/item-details';
-import { ListPage } from '../pages/list/list';
+import { ClickerApp } from './app.component';
+import { ClickerList } from '../pages';
+import { ClickerForm } from '../components';
+import { ClickerButton } from '../components';
+import { ClickersService } from '../services';
+import { ClickerActions } from '../actions';
+import { Page2 } from '../pages';
 
 @NgModule({
   declarations: [
-    MyApp,
-    HelloIonicPage,
-    ItemDetailsPage,
-    ListPage
+    ClickerApp,
+    ClickerList,
+    Page2,
+    ClickerForm,
+    ClickerButton,
   ],
   imports: [
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(ClickerApp),
   ],
   bootstrap: [IonicApp],
   entryComponents: [
-    MyApp,
-    HelloIonicPage,
-    ItemDetailsPage,
-    ListPage
+    ClickerApp,
+    ClickerList,
+    Page2,
   ],
-  providers: []
+  providers: [ ClickerActions, ClickersService ],
 })
 export class AppModule {}

src/components/clickerButton/clickerButton.ts

@@ -1,15 +1,13 @@
 'use strict';
 
 import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
-import { Button }                                                          from 'ionic-angular';
 import { ClickersService }                                                 from '../../services';
 import { Clicker }                                                         from '../../models';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-button',
-  templateUrl: 'build/components/clickerButton/clickerButton.html',
-  directives: [Button],
+  templateUrl: 'clickerButton.html',
 })
 
 export class ClickerButton {

src/components/clickerForm/clickerForm.ts

@@ -1,15 +1,13 @@
 'use strict';
 
-import { FormGroup, FormBuilder, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ChangeDetectionStrategy, Component, Output, EventEmitter } from '@angular/core';
-import { TextInput }                                                from 'ionic-angular';
 import { ClickersService, Utils }                                   from '../../services';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-form',
-  templateUrl: 'build/components/clickerForm/clickerForm.html',
-  directives: [TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
+  templateUrl: 'clickerForm.html',
 })
 
 export class ClickerForm {

src/pages/clickerList/clickerList.ts

@@ -2,13 +2,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavController }                      from 'ionic-angular';
 import { Observable }                         from 'rxjs/Observable';
 import { ClickersService }                    from '../../services';
-import { ClickerButton, ClickerForm }         from '../../components';
 import { Clicker }                            from '../../models';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'build/pages/clickerList/clickerList.html',
-  directives: [ClickerButton, ClickerForm],
+  templateUrl: 'clickerList.html',
 })
 
 export class ClickerList {

src/pages/page2/page2.ts

@@ -1,11 +1,9 @@
 'use strict';
 
 import { Component }        from '@angular/core';
-import { Range, TextInput } from 'ionic-angular';
 
 @Component({
-  templateUrl: 'build/pages/page2/page2.html',
-  directives: [Range, TextInput],
+  templateUrl: 'page2.html',
 })
 
 export class Page2 {

src/services/clickers.ts

@@ -1,6 +1,6 @@
 import { Injectable }      from '@angular/core';
-import { Observable }      from 'rxjs/Observable';
 import { Store }           from '@ngrx/store';
+import { Observable }      from 'rxjs/Observable';
 import { ClickerActions }  from '../actions';
 import { ClickerSelector } from '../selectors';
 import { Clicker }         from '../models';

src/services/storage.ts

@@ -1,6 +1,6 @@
 'use strict';
-import { Injectable }          from '@angular/core';
-import { SqlStorage, Storage } from 'ionic-angular';
+import { Injectable } from '@angular/core';
+import { Storage }    from '@ionic/storage';
 
 @Injectable()
 export class StorageService {
@@ -12,7 +12,7 @@ export class StorageService {
   }
 
   public static initStorage(): Storage {
-    return new Storage(SqlStorage);
+    return new Storage();
   }
 
   public get(key: string): Promise<{}> {