title: Angular 2 Can't Resolve Router Dependency
body: <p>When I'm trying to inject Router into my Authentication Guard I get the following error:</p>
  
  <blockquote>
    <p>Can't resolve all parameters for AuthenticationGuardService: (?)</p>
  </blockquote>
  
  <p>Unfortunately, I cannot use node server as this is one of the project requirements (team decision). Instead I'm compiling ts files to ES5 and serving it from php app which runs on nginx server. </p>
  
  <p>I may be missing some dependency or it is another case of circular dependencies. I'm not sure how to resolve it.</p>
  
  <p><strong>authentication-guard.service.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';;
  import {Router, CanActivate } from '@angular/router';
  
  @Injectable()
  export class AuthenticationGuardService implements CanActivate {
  
      constructor(
          private router: Router,
      ) {}
  
      canActivate() {
          this.router.navigate(['login']);
          return false;
      }
  
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule }                         from '@angular/core';
  import { BrowserModule }                    from '@angular/platform-browser';
  import { FormsModule }                      from '@angular/forms';
  import { HttpModule }                       from '@angular/http';
  
  import { AppComponent}                from './app.component';
  import { AppRoutingModule}            from './app-routing.module';
  import { AuthenticationComponent }    from './authentication/authentication.component';
  import { AuthenticationGuardService } from './authentication/guards/authentication-guard.service';
  
  
  @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          AppRoutingModule,
          HttpModule
      ],
      declarations: [
          AppComponent,
          AuthenticationComponent,
      ],
      providers: [
          AuthenticationGuardService,
      ],
      bootstrap: [ AppComponent ]
  })
  export class AppModule{}
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule }               from '@angular/core';
  import { RouterModule, Routes }   from '@angular/router';
  import { AuthenticationComponent} from './authentication/authentication.component'
  import { DashboardComponent}      from './dashboard/dashboard.component'
  import { AuthenticationGuardService }    from './authentication/guards/authentication-guard.service';
  
  const routes: Routes = [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'login', component: AuthenticationComponent },
      { path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuardService]}
  ];
  
  @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "admin-app",
    "version": "1.0.0",
    "description": "admin application",
    "main": "index.js",
    "devDependencies": {
      "@angular/common": "~2.3.0",
      "@angular/compiler": "~2.3.0",
      "@angular/core": "~2.3.0",
      "@angular/forms": "~2.3.0",
      "@angular/http": "~2.3.0",
      "@angular/platform-browser": "~2.3.0",
      "@angular/platform-browser-dynamic": "~2.3.0",
      "@angular/router": "~3.3.0",
      "@types/core-js": "^0.9.35",
      "@types/node": "^6.0.52 ",
      "core-js": "^2.4.1",
      "grunt": "^0.4.5",
      "grunt-contrib-concat": "^1.0.1",
      "grunt-contrib-copy": "^1.0.0",
      "grunt-contrib-cssmin": "latest",
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-less": "latest",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0",
      "grunt-contrib-watch": "latest",
      "reflect-metadata": "^0.1.8",
      "rxjs": "5.0.0-rc.4",
      "systemjs": "0.19.40",
      "zone.js": "^0.7.2"
    },
    "author": "CC",
    "dependencies": {
      "grunt-ts": "^6.0.0-beta.3",
      "typescript": "^2.1.4"
    }
  }
  </code></pre>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code> * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': '/js/libraries/node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'js/src',
  
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: './main.js',
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>