Skip to content

Commit 689e987

Browse files
gianpajdavideast
authored andcommitted
docs(): Update Auth-with-Ionic3-Augular4.md (#1171)
Fix promise-polyfill instruction and make tutorial less verbose
1 parent db67713 commit 689e987

File tree

1 file changed

+34
-39
lines changed

1 file changed

+34
-39
lines changed

docs/Auth-with-Ionic3-Angular4.md

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,47 @@
11
# Using AngularFire with Ionic
22

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.
55

66
Note: - If you're working with Ionic2 and Angular2.0, then you should refer to **Auth-with-Ionic2** tutorial
77
[here](https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md)
88

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.
1010

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
1212
other sign-in providers like **Twitter**, **Google** on your own.
1313

1414
### Prerequisites
1515
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`.
1818

1919
After installing node, check the version by executing the following command in your prompt window:
2020

2121
```bash
2222

23-
C:\projects>node -v
23+
$ node -v
2424
v6.10.2
25-
2625
```
26+
2727
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).
2929

3030
Check your npm version by executing the following command:
3131
```bash
3232

33-
C:\projects>npm -v
33+
$ npm -v
3434
3.10.10
35-
3635
```
3736
Install the Angular CLI, which will be used to build our Angular project and install Angular version 4 or later.
3837

3938
```bash
40-
C:\projects>npm install -g @angular/cli
39+
$ npm install -g @angular/cli
4140
```
4241
Check your angular version by executing the following command:
4342

4443
```bash
45-
C:\projects>ng -v
44+
$ ng -v
4645

4746
@angular/cli: 1.0.0
4847
node: 6.10.2
@@ -57,39 +56,34 @@ Execute the following commands.
5756

5857
```bash
5958

60-
C:\projects>npm install -g cordova
61-
62-
C:\projects>npm install -g ionic
63-
59+
$ npm install -g cordova ionic
6460
```
6561

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:
6763

6864
```bash
69-
C:\projects>cordova -v
65+
$ cordova -v
7066
7.0.1
7167

72-
C:\projects>ionic -v
68+
$ ionic -v
7369
3.4.0
7470
```
7571

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.
7973

8074
To create your app, change into the directory where you want your app to reside and execute the following command:
8175

8276
```bash
83-
C:\projects> ionic start auth-ng4-ionic3-af2 blank
77+
$ ionic start auth-ng4-ionic3-af2 blank
8478
```
8579

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.
8781
8882
Change to the project directory, which was just created with the above command.
8983

90-
> C:\projects\auth-ng4-ionic3-af2>ionic info
84+
```
85+
$ ionic info
9186
92-
```bash
9387
global packages:
9488
9589
@ionic/cli-utils : 1.4.0
@@ -151,40 +145,41 @@ To start your app, execute the following command:
151145

152146
```bash
153147

154-
C:\projects\auth-ng4-ionic3-af2> ionic serve
155-
148+
$ ionic serve
156149
```
157150
If everything is installed correctly, the app should open your browser with the dev server running at the following url
158151
**`http://localhost:8100`** and will display default home page.
159152

160153
### Configuring AngularFire2 and Firebase
161154

162-
Install angularfire2 and firebase by executing the following command in your project directory:
155+
Install the required packages in your project directory:
163156

164157
```ts
165158

166-
C:\projects\auth-ng4-ionic3-af2>npm install angularfire2 firebase promise-polyfill --save
159+
$ npm install angularfire2 firebase promise-polyfill --save
167160

168161
```
169162

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:_
171164

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+
```
175170

176171
### Setup @NgModule
177172

178173
Open your project in your favourite editor and open the `app.module.ts` file, under `src/app`
179174
and add the following three entries.
180175

181-
>1) Import AngularFireModule and AngularFireDatabaseModule at top.
176+
1) Import AngularFireModule and AngularFireDatabaseModule at top.
182177

183-
>2) Define your firebaseConfig constant.
178+
2) Define your firebaseConfig constant.
184179

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
186181

187-
>4) Also, add AngularFireDatabase in the "providers" array in @NgModule
182+
4) Also, add AngularFireDatabase in the "providers" array in @NgModule
188183

189184
your `app.module.ts` file should look something like this.
190185

0 commit comments

Comments
 (0)