72 comments on “Login Screen and Authentication with Angular2

  1. Lena

    That’s awesome! Don’t you have a github to upload it or somewhere that i can get full source? Thanks for that!

      1. ishu mishra

        Hello sir as i couldnt compile it some probs are there when i trying to run my server part then i am getting this error even i have changed my port
        Error: listen EADDRINUSE :::3004

        1. Abhinav

          I think since AuthenticatedUser is an object, you can’t directly assign it to a string. Hence you can prolly assign authenticatedUser.email to the user variable. This should solve the issue. It’s just up to you how and what you wanna assign to the user. Just make sure it’s a string.

        1. Tom

          Id assume so Patrick. Probably using


          However for some reason I am not able to import LoginComponenet and RouteConfig. Anyone else have this error?

  2. ayost

    This works like a charm and avoid the trick I’ve been seeing of overriding router-outlet. However, I am concerned about the timing of the OnInit hook. Is this method really secure, or could a crafty user stop execution before the OnInit hook and be able to view the page?

    1. Leonardo Jines

      He would probably be able to view the page, but in a real case scenario I recommend you to validate the user on the back-end before returning any significant data or performing an important task.

  3. CCPony

    Hello. Your comment, “Although I’ve put these rules on an Angular2 service, I strongly recommend you to let the server control everything regarding user authentication” is interesting. Obviously, I’m interested in your tutorial so that I can learn how to properly use authentication with Angular2. Why would you write a tutorial that is inherently insecure?

  4. Swetha

    Good article. Thanks for posting it.

    I have a compilation err on authentication.service.ts – [ts] Property ‘find’ does not exist on type ‘User[]’.
    any. I see that i dont have the folder structure – browser/ambient/es6-shim/es6-shim.d.ts, main/ambient/es6-shim/es6-shim.d.ts. How do i generate those files inside typings folder?

    1. the digitalmouse

      Swetha, did you do ‘npm install’ in the root folder of the project before running the app?

      1. Kasim

        Hi i got the same error like ‘Property ‘find’ does not exist on type ‘User[]’.’ i installed ‘npm install’ in root folder. so that i got the folder ‘node-modules’. how to fix that issue?

  5. kumar

    Hi ,

    I want to know how to validate the login form using php webservice . Also i need to know how to pass the Username and password to webservice to validate the credentials.

    1. Kasim

      Hi i got the same error like ‘Property ‘find’ does not exist on type ‘User[]’.’ i installed ‘npm install’ in root folder. so that i got the folder ‘node-modules’. how to fix that issue?

  6. sagar

    Hi Leonardo,
    Very good article , May i know how to take the email and password dynamically from ui and storing in database

  7. Vishnu

    Hi Leonardo

    Very good article.
    Can you also please explain, how can we show logged in user details in app.component.ts.

  8. kramer

    it only checks the username, so it logs you in even without entering the password. How can I check the password as well?

    1. kramer

      Edit: I think its something like this but please correct me if I’m wrong

      var authenticatedUser = users.find(u => u.username === user.username && user.password);
  9. vinothnair

    Thanks for the awesome article. I understand your point on the server side validation of user which make sense but In this article the authenticated user is stored on the local storage with the password. I think the password should be removed before storing it to the local storage. Please clarify.

  10. Mike

    Great tutorial, thanks! What if i am developing an app for a big corp and the logged in area is only intended for employees. They have a button that is that is called blacklistClient and there is no way they want somebody to be reading the source code with chrome dev tools. Like in your example i am able to see private.component.ts and all its content without being logged in. Yes in real world i could not able to pull data from the API, but there must be cases where the html code should be hidden to non logged in users too. How can i achieve this?

  11. Nedu

    Thanks Leonardo. Very helpful. I would like to get the username and password from a DB and will like to use PHP as the server side language, using angular2 (typescript), please what is the best way to achieve this. Thanks

  12. rohit

    Hi Leonardo ,

    When I trying to run the app I got an error .
    Can not find ‘RouteConfig’ * \index has no exported member “Router provider”

  13. Shawn

    I tried just installing the angular 2 framework and running it. But it i run it in the new RC6 it doesnt work. Can you look at it.


  14. Sai

    Hey Leo, thanks for sharing this, but i guess I am having similar issues like Lena.. for authenticatedUser. Argument of type ‘User’ is not assignable to parameter of type ‘string ‘. Any suggestions ?!

  15. prachi

    very helpful article. i want to use sails.js in back end and integrate angular2 with sails.js ..please tell me the way how can i achieve this?

  16. John

    Thanks for this article. In localhost the app is working fine, when I upload all stuff into my website it gives only a ‘Loading…’ message. How can I fix this issue? Thanks in advance!

      1. John

        Hi Leonardo,

        There is a npm-debug log, that’s all I found.

        0 info it worked if it ends with ok
        1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
        1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
        1 verbose cli   'run',
        1 verbose cli   'lite' ]
        2 info using npm@3.10.3
        3 info using node@v6.5.0
        4 verbose run-script [ 'prelite', 'lite', 'postlite' ]
        5 info lifecycle angular2-quickstart@1.0.0~prelite: angular2-quickstart@1.0.0
        6 silly lifecycle angular2-quickstart@1.0.0~prelite: no script for prelite, continuing
        7 info lifecycle angular2-quickstart@1.0.0~lite: angular2-quickstart@1.0.0
        8 verbose lifecycle angular2-quickstart@1.0.0~lite: unsafe-perm in lifecycle true
        9 verbose lifecycle angular2-quickstart@1.0.0~lite: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\user\Desktop\Angular2\angular2-login\node_modules\.bin;C:\Program Files\nodejs;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\user\Desktop\Angular2\angular2-login\node_modules\.bin;C:\Program Files\nodejs;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;PATH=C:\Program Files\Java\jdk1.8.0_66\bin;C:\Users\user\Downloads\apache-maven-3.3.9-bin\apache-maven-3.3.9\bin;C:\Program Files\apache-tomcat-8.0.28\bin;C:\Program Files\Java\jdk1.8.0_66\bin;C:\Users\user\Downloads\apache-maven-3.3.9-bin\apache-maven-3.3.9\bin;C:\Program Files\MySQL\MySQL Server 5.7\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\WIDCOMM\Bluetooth Software\;C:\Program Files\WIDCOMM\Bluetooth Software\syswow64;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\cURL\bin;C:\Program Files (x86)\Windows Live\Shared;C:\Users\user\Documents\ant\apache-ant-1.9.6\bin;C:\Program Files\CloudFoundry;C:\Program Files\nodejs\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Users\user\AppData\Local\.meteor\;C:\Program Files (x86)\Nmap;C:\Users\user\AppData\Roaming\npm
        10 verbose lifecycle angular2-quickstart@1.0.0~lite: CWD: C:\Users\user\Desktop\Angular2\angular2-login
        11 silly lifecycle angular2-quickstart@1.0.0~lite: Args: [ '/d /s /c', 'lite-server' ]
        12 silly lifecycle angular2-quickstart@1.0.0~lite: Returned: code: 3221225786  signal: null
        13 info lifecycle angular2-quickstart@1.0.0~lite: Failed to exec lite script
        14 verbose stack Error: angular2-quickstart@1.0.0 lite: `lite-server`
        14 verbose stack Exit status 3221225786
        14 verbose stack     at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:242:16)
        14 verbose stack     at emitTwo (events.js:106:13)
        14 verbose stack     at EventEmitter.emit (events.js:191:7)
        14 verbose stack     at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
        14 verbose stack     at emitTwo (events.js:106:13)
        14 verbose stack     at ChildProcess.emit (events.js:191:7)
        14 verbose stack     at maybeClose (internal/child_process.js:877:16)
        14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
        15 verbose pkgid angular2-quickstart@1.0.0
        16 verbose cwd C:\Users\user\Desktop\Angular2\angular2-login
        17 error Windows_NT 6.1.7601
        18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lite"
        19 error node v6.5.0
        20 error npm  v3.10.3
        21 error code ELIFECYCLE
        22 error angular2-quickstart@1.0.0 lite: `lite-server`
        22 error Exit status 3221225786
        23 error Failed at the angular2-quickstart@1.0.0 lite script 'lite-server'.
        23 error Make sure you have the latest version of node.js and npm installed.
        23 error If you do, this is most likely a problem with the angular2-quickstart package,
        23 error not with npm itself.
        23 error Tell the author that this fails on your system:
        23 error     lite-server
        23 error You can get information on how to open an issue for this project with:
        23 error     npm bugs angular2-quickstart
        23 error Or if that isn't available, you can get their info via:
        23 error     npm owner ls angular2-quickstart
        23 error There is likely additional logging output above.
        24 verbose exit [ 1, true ]
        1. John

          In the logging, the lite server location is still on a C:\Program Files path, which is unreachable from the hostingserver. The version of node.js is 6.5.0 and the version of npm is 3.10.3 which is compatible. Do I have to deploy a lite server on my hosting server?

  17. John

    ok, I download the zip file and after extracting the file, I open the cmd in that directory; npm install, npm start, everything works fine, in localhost the tool is working. When I upload the files after this in the webhosting there is only a ‘Loading…’ message and it is not working at all. What is going wrong?

  18. Lord_Pinhead


    thanks for the head start. But, if you need Roles for the UI, i.e. hiding not accessable parts of the site, you have to add more informationen.
    In my Java or .Net Backend, the Userinformation is complete, so the User Object will be extended with an Collection of Roles. If you want, i could send you my source.

  19. Abhinav

    Great tutorial! Would it be possible for you to modify the code according to the new stable release. I am getting errors for some of your code and it would be good if I align the code according to the new changes.


  20. Sudheer Pal


    This seems to an older version of Angular 2.

    Is code for later version is available on Github?

    Also do you have code where we can use Rest API to get the Loginof users.

  21. Neha

    Good tutorial.
    Could you please send the folder structure?
    I guess somewhere is going wrong in my app.
    Is it ok if we use angular/core instead of @angular/core? Because its throwing error that ‘cannot find module’ since I had installed npm modules.

  22. aravind

    hey bro like this tutorial ,but i want after login user in the login page it is redirect to the some page (example like user dash board)then i need sign up page creation code and both pages how to add with the backend java code .

    1. Pradeep

      Hi Sri,
      If you just get ‘Loading….’, it means you are able to access the Server and Angular 2 installation is fine.
      Since this has Single Page Application architecture, /src/index.html file is the only file accessed and it echoes “Loading…” in “app-root” section.

  23. snehasish

    var authenticatedUser = users.find(u => u.email === user.email);
    in this line the .find function is not working for my code i have checked it couple of times and its showing me an error like
    [ts] Property ‘find’ does not exist on type ‘User[]’

    So, What to do anyone help.

  24. Rohit Luthra

    I have developed Rest Service for my android app using express.js, mongodb, mongoose it is running and hosted somewhere and my app is able to use it. Now we found a requirement of web admin for the same service and I want to create that web admin in Angular2 with material design 2. So can you please provide us tutorial of Angular2 with material design which should also use any running rest service(web service).

  25. chirag

    Hey, I am facing error has no exported member ‘ROUTER_PROVIDER’ and router import error. how can i solve it? Thanks in advance.

  26. Krunal

    I want to sign in form with api authentication. I have created api but I don ‘t know how to fetch data and use them in angular 2

  27. ketan

    Hi Leonardo,
    I went through this article which was exactly what I was looking for. Thanks for posting it. I am currently working on angular 2 app with a java based backend service. I already know how to get data from my backend and then parse through it to display it on my frontend angular app. I want to use a login to authenticate users on front end. So what is the safer way to do that. I tried the example given above, it worked perfectly. Now, I have a authentication service, the same as you have in above example and I want to call the backend to do the authentication on the credentials given by the user while loggin in. How do I do that? Shall I call http get() method and get that arrays of data consisting users information into my angular app and then compare it with the inputs given by the user or is there any other better way?
    Thanks in advance

Leave a Reply to ishu mishra Cancel reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>