update to ionic 3.0.1 / angular-cli 1.0.0

CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="2.12.0"></a>
+# 2.12.0 (2017-04-11)
+
+### Features
+
+* **Update**: Update to Ionic 3.0.1 and @angular/cli 1.0.0 (implying @angular 4.0.0) ([](https://github.com/lathonez/clicker/commit/))
+
 <a name="2.11.0"></a>
 # 2.11.0 (2017-04-11)
 

README.md

@@ -71,8 +71,8 @@ PRs are welcome, see the [roadmap sticky](https://github.com/lathonez/clicker/is
 
 See the changelog [here](https://github.com/lathonez/clicker/blob/master/CHANGELOG.md)
 
-## Dependencies
+## Updated for:
 
-* **@angular/*:** 2.4.0
-* **@angular/cli:**: 1.0.0-rc.0
-* **Ionic:** 2.1.0
+* **@angular/*:** 4.0.0
+* **@angular/cli:**: 1.0.0
+* **@ionic-angular:** 3.0.1

e2e/clickerList.e2e-spec.ts

@@ -1,9 +1,9 @@
 import { browser, element, by, ElementFinder } from 'protractor';
 
 let clickerField: ElementFinder = element(by.css('.text-input'));
-let clickerButton: ElementFinder = element.all(by.className('button-outline')).first();
+let addButton: ElementFinder = element.all(by.className('button-outline')).first();
 let removeButton: ElementFinder = element.all(by.css('.button-outline-md-danger')).first();
-let firstClicker: ElementFinder = element.all(by.className('clickerList')).first();
+let firstClicker: ElementFinder = element.all(by.tagName('clicker-button')).first().element(by.tagName('button'));
 
 describe('ClickerList', () => {
 
@@ -22,7 +22,7 @@ describe('ClickerList', () => {
 
   it('should add a Clicker', () => {
     'test clicker one'.split('').forEach((c) => clickerField.sendKeys(c));
-    clickerButton.click();
+    addButton.click();
     browser.driver.sleep(1000);
     expect(firstClicker.getText()).toEqual('TEST CLICKER ONE (0)');
   });

e2e/tsconfig.e2e.json

@@ -1,16 +1,9 @@
 {
+  "extends": "../tsconfig.ng-cli.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
-    "outDir": "../dist/out-tsc-e2e",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es6",
+    "target": "es5",
     "types":[
       "jasmine",
       "node"

package.json

@@ -15,29 +15,31 @@
     "test-coverage": "ng test --code-coverage",
     "test-ci": "ng test --watch=false --code-coverage"
   },
-  "version": "2.11.0",
+  "version": "2.12.0",
   "dependencies": {
-    "@angular/common": "2.4.0",
-    "@angular/compiler": "2.4.0",
-    "@angular/compiler-cli": "2.4.0",
-    "@angular/core": "2.4.0",
-    "@angular/forms": "2.4.0",
-    "@angular/http": "2.4.0",
-    "@angular/platform-browser": "2.4.0",
-    "@angular/platform-browser-dynamic": "2.4.0",
-    "@angular/platform-server": "2.4.0",
-    "@angular/router": "3.4.0",
-    "@ionic/storage": "1.1.7",
-    "ionic-angular": "2.1.0",
-    "ionic-native": "2.4.1",
+    "@angular/common": "4.0.0",
+    "@angular/compiler": "4.0.0",
+    "@angular/compiler-cli": "4.0.0",
+    "@angular/core": "4.0.0",
+    "@angular/forms": "4.0.0",
+    "@angular/http": "4.0.0",
+    "@angular/platform-browser": "4.0.0",
+    "@angular/platform-browser-dynamic": "4.0.0",
+    "@angular/router": "4.0.0",
+    "@ionic-native/core": "3.4.2",
+    "@ionic-native/splash-screen": "3.4.2",
+    "@ionic-native/status-bar": "3.4.2",
+    "@ionic/storage": "2.0.1",
+    "ionic-angular": "3.0.1",
     "ionicons": "3.0.0",
-    "rxjs": "5.1.0",
+    "rxjs": "5.1.1",
     "sw-toolbox": "3.4.0",
-    "zone.js": "0.7.6"
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.0",
-    "@ionic/app-scripts": "1.1.3",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "4.0.0",
+    "@ionic/app-scripts": "1.3.0",
     "@types/jasmine": "2.5.41",
     "@types/node": "7.0.4",
     "codecov": "1.0.1",
@@ -49,11 +51,11 @@
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "karma-coverage-istanbul-reporter": "0.2.0",
-    "protractor": "4.0.13",
-    "ts-node": "1.2.1",
-    "tslint": "4.4.1",
+    "protractor": "5.1.0",
+    "ts-node": "2.0.0",
+    "tslint": "4.5.0",
     "tslint-eslint-rules": "3.2.3",
-    "typescript": "2.0.10"
+    "typescript": "2.2.1"
   },
   "cordovaPlugins": [
     "cordova-plugin-whitelist",

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild }          from '@angular/core';
 import { Platform, MenuController, Nav } from 'ionic-angular';
-import { StatusBar, Splashscreen } from 'ionic-native';
+import { StatusBar }                     from '@ionic-native/status-bar';
+import { SplashScreen }                  from '@ionic-native/splash-screen';
 import { ClickerList, Page2 }            from '../pages';
 
 @Component({
@@ -10,15 +11,20 @@ export class ClickerApp {
 
   @ViewChild(Nav) public nav: Nav;
 
-  public rootPage: any;
-  public pages: Array<{ title: string, component: any }>;
   private menu: MenuController;
   private platform: Platform;
+  private splash: SplashScreen;
+  private status: StatusBar;
 
-  constructor(platform: Platform, menu: MenuController) {
+  public rootPage: any;
+  public pages: Array<{ title: string, component: any }>;
+
+  constructor(platform: Platform, menu: MenuController, splash: SplashScreen, status: StatusBar) {
 
-    this.platform = platform;
     this.menu = menu;
+    this.platform = platform;
+    this.splash = splash;
+    this.status = status;
 
     this.rootPage = ClickerList;
     this.initializeApp();
@@ -34,8 +40,8 @@ export class ClickerApp {
     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();
-      Splashscreen.hide();
+      this.status.styleDefault();
+      this.splash.hide();
     });
   }
 

src/app/app.module.ts

@@ -1,5 +1,8 @@
 import { NgModule, ErrorHandler }                   from '@angular/core';
+import { BrowserModule }                            from '@angular/platform-browser';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { StatusBar }                                from '@ionic-native/status-bar';
+import { SplashScreen }                             from '@ionic-native/splash-screen';
 import { ClickerApp }                               from './app.component';
 import { ClickerList, PagesModule, Page2 }          from '../pages';
 import { ClickersService, StorageService }          from '../services';
@@ -9,6 +12,7 @@ import { ClickersService, StorageService }          from '../services';
     ClickerApp,
   ],
   imports: [
+    BrowserModule,
     PagesModule,
     IonicModule.forRoot(ClickerApp),
   ],
@@ -19,9 +23,11 @@ import { ClickersService, StorageService }          from '../services';
     Page2,
   ],
   providers: [
-    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    StatusBar,
+    SplashScreen,
     ClickersService,
     StorageService,
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
   ],
 })
 

src/app/app.spec.ts

@@ -1,13 +1,13 @@
 import { ClickerApp }                      from './app.component';
-import { MenuMock, NavMock, PlatformMock } from '../mocks';
+import { MenuMock, NavMock, PlatformMock, SplashMock, StatusMock } from '../mocks';
 import { Page2 }                           from '../pages';
 
 let instance: ClickerApp = null;
 
 describe('ClickerApp', () => {
 
   beforeEach(() => {
-    instance = new ClickerApp((<any> new PlatformMock), (<any> new MenuMock));
+    instance = new ClickerApp((<any> new PlatformMock), (<any> new MenuMock), (<any>new SplashMock()), (<any>new StatusMock()));
     instance['nav'] = (<any>new NavMock());
   });
 

src/mocks.ts

@@ -145,6 +145,20 @@ export class PlatformMock {
   }
 }
 
+export class SplashMock {
+
+  public hide() {
+    return Promise.resolve(true);
+  }
+}
+
+export class StatusMock {
+
+  public styleDefault() {
+    return Promise.resolve(true);
+  }
+}
+
 export class StorageMock {
 
   public get(key: string): Promise<{}> {

src/services/storage.ts

@@ -12,7 +12,7 @@ export class StorageService {
   }
 
   public static initStorage(): Storage {
-    return new Storage();
+    return new Storage({});
   }
 
   public get(key: string): Promise<{}> {

src/tsconfig.spec.json

@@ -1,16 +1,9 @@
 {
+  "extends": "../tsconfig.ng-cli.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
-    "target": "es6",
+    "target": "es5",
     "baseUrl": "",
     "types": [
       "jasmine",
@@ -21,6 +14,7 @@
     "test.ts"
   ],
   "include": [
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "**/*.d.ts"
   ]
 }

tsconfig.ng-cli.json

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}