A brave and "brand" new world
Who am I?
- I'm doing internet solar laps (years) since 1999
- In Angular dreamland since 2013
- I DO NOT KNOW EVERYTHING!!!
- I Still have lots to do to improve, but I'm having fun a long time ago!
Are we production ready?
- Angular2 is now release candidate
- Angular CLI is usable, but still missing more features
- AngularFire is still in beta, but a lot of improvements has been done already, develop with caution
- Documentation has improved but there are still some chapters pointing to previous versions
- Angular CLI still has some TS compilations errors due to FilesGlob config...
- Injection of dependencies in routes is not completely done by CLI
Let's dive in!
Install Angular CLI
Remember dependencies: NodeJS 4 and up
github repo: https://github.com/angular/angular-cli
Create new project
it will create the project folder and download initial dependencies needed
Project name: simplechat
Install AngularFire 2 & Firebase
There are a few steps for doing this...
This is based on the documentation on AngularFire2 repo and modified a little bit to fit our purposes.
Fixed to include proper version of Firebase
this is so typescript can work with the Firebase lib
Include AngularFire 2 and Firebase in the vendor files
Build And check
Just to make sure we had everything ok
in: /dist/vendor folder we should have angularfire2 and firebase folders.
Let's modify System.js
go to Firebase and create an account
Create an account and create a new database.
You will need to setup auth methods (we are going to use Github later) you can do it now or later. Remember to follow appropriate steps depending on the social login service you want to use.
Let's modify Angular Bootstrap
/src/main.ts, inject the Firebase providers, and specify your default Firebase
remember to replace <your-firebase-app> in the default Firebase url
Let's create our first route
it will generate the component and inject the route data in the inmediate parent component
Let's set login as the root route
Change path for root
Now the old injection problem in routes is solved, but we don't see the login component showing below our title.
Fixing ng-cli code errors
There is a constructor instantiating the router missing from the code in our main component simplechat.component.ts
We have our first route!!!
now some auth will be cool
- We'll use Github auth
- You'll need to setup the app in you Github account
- Also copy pass keys, secrets and whatever security sentences or phrases the oauth process requires to.
- This has been already setup!!!
Configure application in bootstrap
Let's edit our login.component.ts
Let's inject firebase auth on it
create a constructor to use it
and modify the HTML template adding:
What about an interceptor?
In Angular 1.x we did some "ui-router" magic with an interceptor to prevent entering paths without proper auth... How we can so this here?
we know the drill...
Let's create our second route
Let's get back to our simplechat.component.ts
Let's inject the needed dependencies for it
building some Firebase Auth observables to handle the routes permissions
final result in simplechat.component.ts
Awesome! it's working
how about a logout?
in our main component (simplechat.component.ts): piece of cake!
and call the method in the template (simplechat.component.html)
get to business
We now have our main project and some auth with it. We can dive now in the chat app!
a little magic from AngularFire2
Let's edit chat.component.ts
now on the template
Bonus track: Let's deploy
We're going to use Firebase hosting for rapid deployment and testing, let's install it.
follow on console instructions on each step
Angular2, AngularFire2 & Angular CLI
By Jose Fernando Duran