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:


"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'"


    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?


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';

  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(,, utcOffset, (userInfo) => {

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

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

      this.dataService.authGetData(`api/users/user?id=${}`, (currentUser) => {
        sessionStorage.setItem('current_user', JSON.stringify(currentUser));   
            this.isRequesting = false;
            this.userService.isRequesting = false;
      }, (error) => {
        this.isRequesting = false;
        this.userService.isRequesting = false;
        this.errors = error;
        }, (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 }}

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.