@@ -67,15 +67,15 @@ Once the above commands are executed successfully, Check the versions of cordova
6767
6868``` bash
6969C:\p rojects> cordova -v
70- 6.4.0
70+ 7.0.1
7171
7272C:\p rojects> ionic -v
73- 2.2.3
73+ 3.4.0
7474```
7575
7676These are the latest versions as of writting this document.
7777
78- On successful execution of above commands, you're all set to create your app with Ionic 3 framework.
78+ On successful execution of above commands, you're all set to create your app with Ionic framework.
7979
8080To create your app, change into the directory where you want your app to reside and execute the following command
8181
@@ -90,45 +90,57 @@ Change to the project directory, which was just created with above command
9090> C:\projects\auth-ng4-ionic3-af2>ionic info
9191
9292``` bash
93- Cordova CLI: 6.4.0
94- Ionic Framework Version: 3.1.1
95- Ionic CLI Version: 2.2.3
96- Ionic App Lib Version: 2.2.1
97- Ionic App Scripts Version: 1.3.7
98- ios-deploy version: Not installed
99- ios-sim version: Not installed
100- OS: Windows 10
101- Node Version: v6.10.2
102- Xcode version: Not installed
93+ global packages:
10394
95+ @ionic/cli-utils : 1.4.0
96+ Cordova CLI : 7.0.1
97+ Ionic CLI : 3.4.0
98+
99+ local packages:
100+
101+ @ionic/app-scripts : 1.3.12
102+ @ionic/cli-plugin-cordova : 1.4.0
103+ @ionic/cli-plugin-ionic-angular : 1.3.1
104+ Cordova Platforms : none
105+ Ionic Framework : ionic-angular 3.5.0
106+
107+ System:
108+
109+ Node : v8.1.2
110+ OS : Windows 10
111+ Xcode : not installed
112+ ios-deploy : not installed
113+ ios-sim : not installed
114+ npm : 5.0.4
104115```
105116You need to ensure you've got Ionic Framework Version 3, as shown above.
106117
107118Alternatively you can open ` package.json ` to ensure you've got the following angualr and Ionic versions
108119
109- ``` bash
120+ ``` json
110121"dependencies" : {
111- " @angular/common" : " 4.0.2 " ,
112- " @angular/compiler" : " 4.0.2 " ,
113- " @angular/compiler-cli" : " 4.0.2 " ,
114- " @angular/core" : " 4.0.2 " ,
115- " @angular/forms" : " 4.0.2 " ,
116- " @angular/http" : " 4.0.2 " ,
117- " @angular/platform-browser" : " 4.0.2 " ,
118- " @angular/platform-browser-dynamic" : " 4.0.2 " ,
119- " @ionic-native/core" : " 3.6 .1" ,
120- " @ionic-native/splash-screen" : " 3.6 .1" ,
121- " @ionic-native/status-bar" : " 3.6 .1" ,
122+ "@angular/common" : " 4.1.3 " ,
123+ "@angular/compiler" : " 4.1.3 " ,
124+ "@angular/compiler-cli" : " 4.1.3 " ,
125+ "@angular/core" : " 4.1.3 " ,
126+ "@angular/forms" : " 4.1.3 " ,
127+ "@angular/http" : " 4.1.3 " ,
128+ "@angular/platform-browser" : " 4.1.3 " ,
129+ "@angular/platform-browser-dynamic" : " 4.1.3 " ,
130+ "@ionic-native/core" : " 3.12 .1" ,
131+ "@ionic-native/splash-screen" : " 3.12 .1" ,
132+ "@ionic-native/status-bar" : " 3.12 .1" ,
122133 "@ionic/storage" : " 2.0.1" ,
123- " ionic-angular" : " 3.1.1 " ,
134+ "ionic-angular" : " 3.5.0 " ,
124135 "ionicons" : " 3.0.0" ,
125- " rxjs" : " 5.1.1 " ,
126- " sw-toolbox" : " 3.4 .0" ,
127- " zone.js" : " ^ 0.8.10 "
136+ "rxjs" : " 5.4.0 " ,
137+ "sw-toolbox" : " 3.6 .0" ,
138+ "zone.js" : " 0.8.12 "
128139 },
129140 "devDependencies" : {
130- " @ionic/app-scripts" : " 1.3.7" ,
131- " typescript" : " ~2.2.1"
141+ "@ionic/app-scripts" : " 1.3.12" ,
142+ "@ionic/cli-plugin-ionic-angular" : " 1.3.1" ,
143+ "typescript" : " ~2.3.4"
132144 }
133145
134146```
@@ -157,9 +169,9 @@ C:\projects\auth-ng4-ionic3-af2>npm install angularfire2 firebase --save
157169
158170_ This should add angularfire2 and firebase entry in your project's package.json file in dependencies section. Something similar_
159171
160- > "angularfire2": "^4.0.0-rc.0 ",
172+ > "angularfire2": "^4.0.0-rc.1 ",
161173
162- > "firebase": "^3.9.0 ",
174+ > "firebase": "^4.1.3 ",
163175
164176### Setup @NgModule
165177
@@ -176,7 +188,7 @@ and add the following three entries.
176188
177189your ` app.module.ts ` file should look something like this.
178190
179- ``` bash
191+ ``` typescript
180192
181193import { BrowserModule } from ' @angular/platform-browser' ;
182194import { ErrorHandler , NgModule } from ' @angular/core' ;
@@ -239,7 +251,7 @@ following changes:
239251
240252Your ` home.ts ` file should look like this.
241253
242- ` ` ` bash
254+ ``` typescript
243255
244256import { Component } from ' @angular/core' ;
245257import { NavController } from ' ionic-angular' ;
@@ -265,7 +277,7 @@ export class HomePage {
265277
266278** Update** your ` home.html ` at ` src/pages/home/home.html ` , with following entry
267279
268- ```bash
280+ ``` html
269281
270282<ion-header >
271283 <ion-navbar >
@@ -327,7 +339,7 @@ removing calls to fetch data.`
327339
328340The ` home.html ` should look like below
329341
330- ` ` ` bash
342+ ``` html
331343
332344<ion-header >
333345 <ion-navbar >
@@ -352,7 +364,7 @@ Let's update the `home.ts` to add the corresponding methods:
352364
353365The ` home.ts ` should look like below
354366
355- ```bash
367+ ``` typescript
356368import { Component } from ' @angular/core' ;
357369import { NavController } from ' ionic-angular' ;
358370
@@ -404,7 +416,7 @@ Also add the property in our template to render them on screen.
404416
405417Your ` home.ts ` should look as follows:
406418
407- ` ` ` bash
419+ ``` typescript
408420
409421import { Component } from ' @angular/core' ;
410422import { NavController } from ' ionic-angular' ;
@@ -448,7 +460,7 @@ export class HomePage {
448460
449461and ` home.html ` shouldlook like this
450462
451- ` ` ` bash
463+ ``` html
452464
453465<ion-header >
454466 <ion-navbar >
@@ -516,13 +528,13 @@ and `APP_NAME` with your App Name.
516528 ``` bash
517529
518530C:\p rojects\a uth-ng4-ionic3-af2>
519- ionic plugin add cordova-plugin-facebook4 --variable APP_ID=" 123456789" --variable APP_NAME=" myApplication" --save
531+ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID=" 123456789" --variable APP_NAME=" myApplication"
520532
521533```
522534
523535This should add following entry in your config.xml, located at the root of your project.
524536
525- ` ` ` bash
537+ ``` xml
526538
527539<plugin name =" cordova-plugin-facebook4" spec =" ~1.7.4" >
528540 <variable name =" APP_ID" value =" 1689092456387654" />
@@ -546,12 +558,12 @@ After executing the above command, ensure you got following entry in your `packa
546558
547559``` bash
548560
549- " @ionic-native/facebook" : " ^3.5.0 " ,
561+ " @ionic-native/facebook" : " ^3.12.1 " ,
550562
551563```
552564Now import the ` Platform ` and ` Facebook ` objects in your ` home.ts ` and inject the objects in constructor.
553565
554- ` ` ` bash
566+ ``` typescript
555567
556568import { Platform } from ' ionic-angular' ;
557569import { Facebook } from ' @ionic-native/facebook' ;
@@ -562,7 +574,7 @@ Update the "signInWithFacebook" method and use Platform Service to determine the
562574
563575your ` home.ts ` should look as below
564576
565- ` ` ` bash
577+ ``` typescript
566578
567579import { Component } from ' @angular/core' ;
568580import { NavController } from ' ionic-angular' ;
@@ -619,7 +631,7 @@ You'll also need to add the "Facebook" object in the provider section in app.mod
619631
620632The final ` app.module.ts ` should look like below
621633
622- ```bash
634+ ``` typescript
623635
624636import { BrowserModule } from ' @angular/platform-browser' ;
625637import { ErrorHandler , NgModule } from ' @angular/core' ;
@@ -684,7 +696,7 @@ Everything should work. Now trying running the app on your android phone
684696
685697``` bash
686698
687- C:\projects\auth-ng4-ionic3-af2> ionic run android
699+ C:\p rojects\a uth-ng4-ionic3-af2> ionic cordova run android
688700
689701```
690702
0 commit comments