1
1
# Using AngularFire with Ionic
2
2
3
- This tutorial provides a walkthrough of integrating ANgularFIre Authentication with Ionic 3 /Angular 4+.
4
- The below setup has been tested on Windows 10, but it should be same for Mac/ Linux.
3
+ This tutorial provides a walkthrough of integrating AngularFire Authentication with Ionic 3 /Angular 4+.
4
+ The below setup has been tested on Windows 10 and macOS Sierra , but it should be same for Linux.
5
5
6
6
Note: - If you're working with Ionic2 and Angular2.0, then you should refer to ** Auth-with-Ionic2** tutorial
7
7
[ here] ( https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md )
8
8
9
- Ensure that you're executing these commands as ** Administrator** on Windows and ** sudo** on Mac/Linux to avoid any errors.
9
+ Ensure that you're executing these commands as ** Administrator** on Windows and ** sudo** on Mac/Linux if you get any permission errors.
10
10
11
- This tutorial uses ** Facebook** as the sign-in provider. After completion of this tutorial, you should be able to configure
11
+ This tutorial uses ** Facebook** as the sign-in provider. After completing this tutorial, you should be able to configure
12
12
other sign-in providers like ** Twitter** , ** Google** on your own.
13
13
14
14
### Prerequisites
15
15
The first step is to ensure you have latest version of ** Node** installed.
16
- You can get the latest version from [ here ] ( https://nodejs.org ) .
17
- This will install both node and npm.
16
+ You can get the latest version from [ nodejs.org ] ( https://nodejs.org ) .
17
+ This will install both ` node ` and ` npm ` .
18
18
19
19
After installing node, check the version by executing the following command in your prompt window:
20
20
21
21
``` bash
22
22
23
- C: \p rojects > node -v
23
+ $ node -v
24
24
v6.10.2
25
-
26
25
```
26
+
27
27
As of this writing, this is the most stable version. If you're not on this version,
28
- please upgrade yourself to latest version by installing node from [ here ] ( https://nodejs.org ) .
28
+ please upgrade yourself to latest stable version by installing node from [ nodejs.org ] ( https://nodejs.org ) .
29
29
30
30
Check your npm version by executing the following command:
31
31
``` bash
32
32
33
- C: \p rojects > npm -v
33
+ $ npm -v
34
34
3.10.10
35
-
36
35
```
37
36
Install the Angular CLI, which will be used to build our Angular project and install Angular version 4 or later.
38
37
39
38
``` bash
40
- C: \p rojects > npm install -g @angular/cli
39
+ $ npm install -g @angular/cli
41
40
```
42
41
Check your angular version by executing the following command:
43
42
44
43
``` bash
45
- C: \p rojects > ng -v
44
+ $ ng -v
46
45
47
46
@angular/cli: 1.0.0
48
47
node: 6.10.2
@@ -57,39 +56,34 @@ Execute the following commands.
57
56
58
57
``` bash
59
58
60
- C:\p rojects> npm install -g cordova
61
-
62
- C:\p rojects> npm install -g ionic
63
-
59
+ $ npm install -g cordova ionic
64
60
```
65
61
66
- Once the above commands are executed successfully, check the versions of cordova and ionic by executing the following commands.
62
+ Once the above command is executed successfully, check the versions of cordova and ionic:
67
63
68
64
``` bash
69
- C: \p rojects > cordova -v
65
+ $ cordova -v
70
66
7.0.1
71
67
72
- C: \p rojects > ionic -v
68
+ $ ionic -v
73
69
3.4.0
74
70
```
75
71
76
- These are the latest versions as of this writing.
77
-
78
- On successful execution of the above commands, you're all set to create your app with Ionic framework.
72
+ You're all set to create your app with Ionic framework.
79
73
80
74
To create your app, change into the directory where you want your app to reside and execute the following command:
81
75
82
76
``` bash
83
- C: \p rojects > ionic start auth-ng4-ionic3-af2 blank
77
+ $ ionic start auth-ng4-ionic3-af2 blank
84
78
```
85
79
86
- > The command ionic start will create the project with name "Ionic_AngularFire2_Project " using "blank" template.
80
+ > The command ionic start will create the project with name "auth-ng4-ionic3-af2 " using "blank" template.
87
81
88
82
Change to the project directory, which was just created with the above command.
89
83
90
- > C:\projects\auth-ng4-ionic3-af2>ionic info
84
+ ```
85
+ $ ionic info
91
86
92
- ``` bash
93
87
global packages:
94
88
95
89
@ionic/cli-utils : 1.4.0
@@ -151,40 +145,41 @@ To start your app, execute the following command:
151
145
152
146
``` bash
153
147
154
- C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
155
-
148
+ $ ionic serve
156
149
```
157
150
If everything is installed correctly, the app should open your browser with the dev server running at the following url
158
151
** ` http://localhost:8100 ` ** and will display default home page.
159
152
160
153
### Configuring AngularFire2 and Firebase
161
154
162
- Install angularfire2 and firebase by executing the following command in your project directory:
155
+ Install the required packages in your project directory:
163
156
164
157
``` ts
165
158
166
- C :\ projects \ auth - ng4 - ionic3 - af2 > npm install angularfire2 firebase promise - polyfill -- save
159
+ $ npm install angularfire2 firebase promise - polyfill -- save
167
160
168
161
```
169
162
170
- _ This should add angularfire2 and firebase entry in your project's package.json file in dependencies section . Something similar _
163
+ _ This should add angularfire2, promise-polyfill and firebase entry in your project's package.json file as dependencies. Something similar to: _
171
164
172
- > "angularfire2": "^4.0.0-rc.1",
173
-
174
- > "firebase": "^4.1.3",
165
+ ```
166
+ "angularfire2": "^4.0.0-rc.1",
167
+ "firebase": "^4.1.3",
168
+ "promise-polyfill": "^6.0.2",
169
+ ```
175
170
176
171
### Setup @NgModule
177
172
178
173
Open your project in your favourite editor and open the ` app.module.ts ` file, under ` src/app `
179
174
and add the following three entries.
180
175
181
- > 1 ) Import AngularFireModule and AngularFireDatabaseModule at top.
176
+ 1 ) Import AngularFireModule and AngularFireDatabaseModule at top.
182
177
183
- > 2 ) Define your firebaseConfig constant.
178
+ 2 ) Define your firebaseConfig constant.
184
179
185
- > 3 ) Initialize your app, by adding AngularFireModule and AngularFireAuthModule in the "imports" array in @NgModule
180
+ 3 ) Initialize your app, by adding AngularFireModule and AngularFireAuthModule in the "imports" array in @NgModule
186
181
187
- > 4 ) Also, add AngularFireDatabase in the "providers" array in @NgModule
182
+ 4 ) Also, add AngularFireDatabase in the "providers" array in @NgModule
188
183
189
184
your ` app.module.ts ` file should look something like this.
190
185
0 commit comments