Chrome extension: How to change view upon router.navigate

I’m trying to create a very simple 2-page chrome extension. The first page handles login and the second displays a button that users can click to check-in. Inside the button is a timer letting the user know how much time he has until the next check-in.

Here are my manifest and background pages:

manifest.json

{
"name": "...",
"description": "...",
"version": "0.1",
"manifest_version": 2,
"icons": {
  "16": "assets/favicon-16.png", 
  "128": "assets/favicon-128.png"
},
"background": {
  "page": "index.html",
  "persistent": false
},
"browser_action": {
  "default_icon" : "assets/favicon.ico",
  "default_popup": "index.html#/login"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

index.html




  
    
    PROOf of LIFE
    
    
    
    
  

  
    
  


Now on to the problem:

When I click the ‘ENTER’ button (prtscrn) it calls login(), which executes perfectly fine, sending the api call and receiving the response, but when it hits this.router.navigate(['/check-in']); the view displays nothing but a small blank square (prtscrn) instead of the html from check-in.html… and what’s even stranger in my opinion is that I can click that blank square, where the check-in button should be displaying, and it will run the check-in() method, effectively writing to the database, which tells me that it did in fact navigate to the router-link that I wanted… but how can the functionality be there and no view be rendered?

login.component.ts

import { Component }         from '@angular/core';
import { NgForm }            from '@angular/forms';
import { UserService }       from '../user-service.service';
import { DataService }       from '../data-service.service';
import { AuthGuard }         from '../auth-guard.service';
import { User }              from '../models/user';
import { Router }            from '@angular/router';

@Component({
  templateUrl: './login.component.html',
})

export class LoginComponent {

  title = 'PROOF of LIFE';
  isRequesting : boolean = false;
  errors : string; 
  userLoginModel: User = {
    email: '',
    pin: '',
  };

  constructor(private dataService: DataService, private userService: UserService, private router : Router) {}

  login() {
    this.isRequesting = true;
    this.userService.isRequesting = true;

    let utcOffset = new Date().getTimezoneOffset();

    this.userService.login(this.userLoginModel.email, this.userLoginModel.pin, utcOffset, (userInfo) => {

        if (!userInfo) {
            this.errors = 'Email and/or pin is incorrect.';
            this.isRequesting = false;
            this.userService.isRequesting = false;
            return;
        }

        sessionStorage.setItem('authentication_token', userInfo.auth_token);
        sessionStorage.setItem('next_PoL_action', userInfo.next_PoL_action);

      this.dataService.authGetData(`api/users/user?id=${userInfo.id}`, (currentUser) => {
        sessionStorage.setItem('current_user', JSON.stringify(currentUser));   
            this.router.navigate(['/check-in']);
            this.isRequesting = false;
            this.userService.isRequesting = false;
      }, (error) => {
        this.isRequesting = false;
        this.userService.isRequesting = false;
        this.errors = error;
        return;
      });
        }, (error) => {
            this.isRequesting = false;
            this.userService.isRequesting = false;
            this.errors = error;
        });
    }

}

Here is the check-in.html (which should be displaying)

{{ title }}

{{ checkinTimer | secondsToTime }}
{{ checkinTolerance | secondsToTime }}
inactive

I’ll be happy to provide any additional information, just let me know what you need. I’m sure I’m just missing something really stupid and basic… Thank you for your help.