Angular 4 Authentication Tutorial With Firebase

Angular 4 Authentication Tutorial with Firebase

In this tutorial i will go through the Authentication basics in Angular 4, i will show you how it's working and how to create a simple one.

How does Authentication work ?

Since Angular is a frontend scripting language it won't be opening a session with the backend, it will be sending the auth. information to the server using an api or else to verify, since you don't want to keep authenticating everytime the client wants to check information Angular will send a token to be used to keep/remember logged in users. Continue reading

ERROR in ./~/firebase/app/shared_promise.js , Can't resolve 'promise-polyfill'

ERROR in ./~/firebase/app/shared_promise.js , Can't resolve 'promise-polyfill'

While using firebase SDK and after compiling my Angular 4 project i received this error, as it reads it's missing the promise polyfill script.


Just run the below command from the project working folder:


npm install promise-polyfill --save-exact



What is Angular 4 Service and How to Use it

How to Create Service in Angular 4

How to Create a Service in Angular 4

What is Angular 4 Service and How to Install and Use the Service.

If you did not create your first Angular 4 project yet you can check click here to learn how to create Angular project.

What is Angular Service

While creating an application you will have piece of code or method that you want to use and call in a different places, instead of repeating it you can insert it in a new reusable file which called service and call it 'inject it ' from different components whenever needed by importing it at the beginning of the code. Continue reading

Angular? What? Why?

What is  Angular ?
Simply Angular is a JavaScript Framework which is amazing tool to create a Front End reactive Single Page website.
What is a Single Page Application?
More or less like you mobile application, everything you see in the same page and rendered in the browser, and whenever you need a data it's happened in the background without changing the page you are on.
How it's done?
Angular is changing the dom without the need to change the page.
Angular 2 vs Angular 4

  • Angular 1 was the first AngularJS and it was a great user experience.
  • Angular 2 was a rewrite and totally new and has nothing to do with Angular 1 , so if you don't know any of them then i don't advise you to learn Angular 1 and just jump to 2.
  • Angular 4 is not a complete rewrite but just some tweaks to Angular 2, Angular 3 was skipped for versioning conflicts.

Create your first Angular 4  / Angular 2 Project


Create your first Angular 4 Project

Create your first Angular 4  / Angular 2 Project

For Angular 4 Quickstart video tutorial please scroll down.


Angular has it's own CLI which can be used to handle all the files and project.

Install Angular CLI
To install it you need NodeJS and no that does not mean that you need to learn anything about NodeJS it's going to be just a quick tool to handle both the Angular installation and having your project handled on browser, and the dependencies for you, in a different word it will be used to create a server medium for your project, again you don't need to know anything about it.

Install NodeJS
  • Download the installer from Node.JS website.
  • Choose the right match for your operating system.
  • Follow the installation wizard.
  • Open CMD and test the installation by running 'npm -v', you should get an output with the installed version.

Create your first project steps: Continue reading