Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me

How to Connect Angular2 with Firebase?

This page corresponds to a Meetup and a git-repo: The purpose of the Meetup is to help you start connecting Angular2 to Firebase.

The git-repo is a teaching aid for the Meetup but should be good enough to point you down the path of independent learning.

We start the class by assuming you have Ubuntu installed on your laptop.

If you want to try doing this class with MacOS/X instead of Ubuntu, that should be do-able.

I start by installing Ubuntu 14.04 on my laptop.

The most recent version of Ubuntu which I like is at this URL:

The three general paths to install Ubuntu on a laptop are listed below:
  • Remove Windows and install Ubuntu
  • Ignore Windows and install Ubuntu on USB drive
  • Install VirtualBox on Mac or Windows, Install Ubuntu inside VirtualBox
My favorite path is path2: Ignore Windows and install Ubuntu on USB drive.

Path2 works well with a new laptop should I want to maintain the warranty.

If you are new to the world of Ubuntu laptops I suggest you buy a cheap windows laptop from Walmart and run some experiments.

E-me if you need help:

When I install Ubuntu, it will ask who I am.

I tell Ubuntu that my name is ann.

Then, Ubuntu will create an account named ann which has useful privileges.

If you use a different initial account, you should create an account named ann after you boot the laptop.

The shell commands to create the ann account are listed below:
sudo useradd -m -s /bin/bash ann
sudo passwd ann
The first command creates ann.
The second command gives her a password.

After I create the ann account, I enhance and update Ubuntu.

The shell commands to do this are listed below:

sudo apt-get update
sudo apt-get upgrade

sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev \
libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm3 sqlite3    \
libgdbm-dev libsqlite3-dev gitk emacs wget curl openssh-server aptitude

sudo apt-get update
sudo apt-get upgrade
After that I login as ann and I download Node.js.
cd ~
Then I install it:
cd ~
rm -rf  node
tar zxf node-v5.6.0-linux-x64.tar.gz
mv      node-v5.6.0-linux-x64 node
So, I did that on my laptop. Then I did this:
cd ~ann
git clone
cd  ang2tut20160214
npm install
npm start
The console indicated that lite-server was serving at two URLs:



The first URL corresponded to my Angular2 app.

The second URL corresponded to an admin-UI for lite-server.

I saw this:

ann@nia111:~/ang2tut20160214 $ 
ann@nia111:~/ang2tut20160214 $ npm start

> firebase-angular2-demo-typescript@1.0.0 start /home/ann/ang2tut20160214
> concurrent "npm run tsc:w" "npm run lite" 

[0] > firebase-angular2-demo-typescript@1.0.0 tsc:w /home/ann/ang2tut20160214
[0] > tsc -w
[1] > firebase-angular2-demo-typescript@1.0.0 lite /home/ann/ang2tut20160214
[1] > lite-server
[1] [BS] Access URLs:
[1]  ----------------------------------
[1]        Local: http://localhost:3000
[1]     External:
[1]  ----------------------------------
[1]           UI: http://localhost:3001
[1]  UI External:
[1]  ----------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[0] app/firebase-hero.service.ts(13,5): error TS2377: Constructors for derived classes must contain a 'super' call.
[0] app/mock-heroes.ts(2,12): error TS2322: Type '{ "id": number; "name": string; }[]' is not assignable to type 'Hero[]'.
[0]   Type '{ "id": number; "name": string; }' is not assignable to type 'Hero'.
[0]     Property 'save' is missing in type '{ "id": number; "name": string; }'.
[1] [BS] File changed: app/hero.js
[1] [BS] File changed: app/hero-detail.component.js
[1] [BS] File changed: app/hero.service.js
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/mock-heroes.js
[1] [BS] File changed: app/mock-hero.service.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase.service.factory.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase.config.js
[0] 7:29:00 AM - Compilation complete. Watching for file changes.
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase-utils.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase.service.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase-auth.service.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase.service.provider.js
[1] [BS] File changed: node_modules/firebase-angular2/src/firebase.provider.js
[1] [BS] File changed: node_modules/firebase-angular2/core.js
[1] [BS] File changed: app/firebase-hero.service.js
[1] [BS] File changed: app/boot.js
[1] 16.02.14 07:29:02 304 GET /./index.html (Unknown - 62ms)
[1] 16.02.14 07:29:03 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 324ms)
[1] 16.02.14 07:29:03 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 324ms)
[1] 16.02.14 07:29:03 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 325ms)
[1] 16.02.14 07:29:03 304 GET /node_modules/angular2/bundles/ (Unknown - 326ms)
[1] 16.02.14 07:29:03 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 163ms)
[1] 16.02.14 07:29:04 304 GET /node_modules/angular2/bundles/ (Unknown - 17ms)
[1] 16.02.14 07:29:04 404 GET /favicon.ico (Unknown - 24ms)
[1] 16.02.14 07:29:04 200 GET /app/boot.js (Unknown - 56ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/core.js (Unknown - 37ms)
[1] 16.02.14 07:29:04 200 GET /app/app.component.js (Unknown - 31ms)
[1] 16.02.14 07:29:04 200 GET /app/firebase-hero.service.js (Unknown - 32ms)
[1] 16.02.14 07:29:04 200 GET /app/hero.service.js (Unknown - 32ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase.service.js (Unknown - 112ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase-utils.js (Unknown - 114ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase-auth.service.js (Unknown - 50ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase.config.js (Unknown - 51ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase.service.provider.js (Unknown - 51ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase.service.factory.js (Unknown - 52ms)
[1] 16.02.14 07:29:04 200 GET /node_modules/firebase-angular2/src/firebase.provider.js (Unknown - 18ms)
[1] 16.02.14 07:29:04 200 GET /app/hero-detail.component.js (Unknown - 19ms)
Also it brought up a browser and displayed the Tour of Heroes demo.

Next, I studied the content in the links below to better understand how Angular2 interacts with Firebase:

If you have questions, e-me: Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me