Angular End-To-End Course (Updated with code fixes)

Course URL  https://app.pluralsight.com/library/courses/angular-2-end-to-end/table-of-contents

This was actually a very good demonstration on how to set up authentication in angular using google’s firebase.  The problem:  the starter files would not compile once you got to a certain part of the course (several others had the same issue).  I spent a while playing around with it and the issue seems to be around the Foundations framework that the instructor used for his project.  While making another app I was able to follow along with his instructions for setting up the admin area and it does in fact work.  I thought that I would include those steps below.

Steps to get the application to work

1.  Don’t start with the course files.  You’re going to need to start from scratch.  Don’t worry, it’s not hard and if you’re new at this you’ll learn something along the way.   Also, I recommend that if you’re not doing so that you become comfortable with creating a project from the command line (here is a good tutorial) and that you use git (here is a tutorial).  When he creates a new component you can use the CLI to do the work for you. Example:   ng g c AdminComponent.   Note that this will create the four files for you with the typescript file all set up for you.
2. Bring your own style.  Just use the goodness that bootstrap gives you rather than trying to get the class styles to work.  For example, use this guide to show you how to install and use bootstrap.  For the individual pages you can just go out to the web to find sample code.  For example, you can easily replace the login page with something like this.  You simply grab the html and css and apply them to the template and css files for your component.  Once you have done that you can simply sprinkle in the angular goodness.

   <h3>Login to your account</h3>
                       <form>
                           <div class="form-group">
                               <input type="text" class="form-control" placeholder="Enter Email Address" id="email"
                                  [(ngModel)]="email" name="email" required #em="ngModel">
                                   <div [hidden]="em.valid || em.pristine" class="alert callout">
                                      Email is required
                                   </div>
                           </div>

   I am now able to authenticate with Firebase using the method shown in the course.

3. 

4. User Session is not Retained on Page Refresh
   It looks like this issue is the result of the user’s session not being complete when the canActivate method is run.  The ideal way to do this would be to re-code using an observable so that we don’t run in to these kinds of issues.  I’ll re-write that when I have more time but for now there is a fairly simple way to get this working.  This is only for demonstration purposes – if this were to be done in production we would want to check the time on the local storage variable.
   In the login method write the user’s email address to local storage:

   login(loginEmail: string, loginPassword: string) {
         console.log ('Trying to log in');
         firebase.auth().signInWithEmailAndPassword(loginEmail, loginPassword).then(function(){
           localStorage.setItem("user", firebase.auth().currentUser.email);
         })
         .catch(function(error) {
                   alert(`${error.message} Unable to login. Try again!`);
           });
       }

   Modify the verifyLogin method to check local storage for the user’s email address.  Note that I have removed url as a parameter for this method as it wasn’t being used.

      verifyLogin(): boolean {
           console.log ('Verify login.  Logged in=' + this.userLoggedIn);
          if (localStorage.getItem('user')) {
             console.log('user ist logged in ....', localStorage.getItem('user'));
   
   
             return true;
         } else {
             console.log('user is not logged in');
   
   
             this.router.navigate(['/admin/login']);
             return false;
         }
       }

   And finally clean up the storage item on logOut

   logout(){
           this.userLoggedIn = false;
           firebase.auth().signOut().then(function() {
             localStorage.removeItem('user');
             alert(`Logged Out!`);
           }, function(error) {
               alert(`${error.message} Unable to logout. Try again!`);
           });
       }

   And finally you will need to update admin-menu.component so that user’s name is set correctly.

    ngOnInit(){
           this.theUser = localStorage.getItem('user');