Попытка реализовать охрану маршрута

Question

Я пытаюсь очень просто внедрить защиту маршрутов на одном из моих маршрутов, чтобы обеспечить доступ только для аутентифицированных пользователей.В настоящее время пользователи входят в систему и получают токен через twt, и некоторые проверки подлинности работают успешно.Но в случае с маршрутизацией, какой бы вариант я ни попробовал, браузер выдает ошибку «Не удается найти модуль ./auth/auth.guard».Это мой index.route.js:

import {AuthGuard} from './auth.guard';

export function routerConfig($stateProvider, $urlRouterProvider) {
    'ngInject';
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainController',
            controllerAs: 'main'
        })
        .state('d3', {
            url: '/d3',
            templateUrl: 'app/main/d3.html',
            controller: 'MainController',
            controllerAs: 'main',
            canActivate: [AuthGuard]
        })
        .state('auth', {
            url: '/auth',
            templateUrl: 'app/auth/auth.html',
            controller: 'AuthController',
            controllerAs: 'auth'
        });

    $urlRouterProvider.otherwise('/');
}

Это мой охранник маршрута, auth.guard.js:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
//import { AuthService } from './shared/auth.service';
import { Router } from '@angular/router';
//import { Router } from './index.route';

//@Injectable()
export class AuthGuard implements CanActivate {

  constructor($auth, private router: Router) {

      'ngInject';

      this.$auth = $auth;
      this.isAuthenticated = $auth.isAuthenticated;

  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/auth']);
      return false;
    }
  }
}

А это мой index.module.js:

import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './index.run';
import { MainController } from './main/main.controller';
import { AuthController } from './auth/auth.controller';
import { NavbarController } from './components/navbar/navbar.controller';
import { CompareToDirective } from './directives/compareTo.directive';
import { GithubContributorService } from '../app/components/githubContributor/githubContributor.service';
import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
import { NavbarDirective } from '../app/components/navbar/navbar.directive';
import { MalarkeyDirective } from '../app/components/malarkey/malarkey.directive';

import { AuthGuard } from './auth.guard';

angular.module('myMessageFront', ['ui.router', 'ui.bootstrap', 'toastr', 'satellizer', 'AuthGuard'])
  .constant('API_URL', 'http://localhost:5000/')
  .constant('malarkey', malarkey)
  .constant('moment', moment)
  .config(config)
  .config(routerConfig)
  .run(runBlock)
  .service('githubContributor', GithubContributorService)
  .service('webDevTec', WebDevTecService)
  .controller('MainController', MainController)
  .controller('AuthController', AuthController)
  .controller('NavbarController', NavbarController)
  .directive('acmeNavbar', NavbarDirective)
  .directive('acmeMalarkey', MalarkeyDirective)
  .directive('compareTo', CompareToDirective);