Angular 2 Can't Resolve Router Dependency

Question

When I'm trying to inject Router into my Authentication Guard I get the following error:

Can't resolve all parameters for AuthenticationGuardService: (?)

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.

I may be missing some dependency or it is another case of circular dependencies. I'm not sure how to resolve it.

authentication-guard.service.js

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

}

app.module.ts

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{}

app-routing.module.ts

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 {}

package.json

{
  "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"
  }
}

systemjs.config.js

 * 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);

I have similar problem when I use the routing example from angular.io/docs/ts/latest/guide/router.html and apply it to my environment. — mbryja
– mbryja, Commented Dec 22, 2016 at 0:11

mbryja · Accepted Answer · 2018-04-12 14:01:09Z

I think I've figured it out. I had incorrect compiler settings.

Before

        ts: {
            options: {
                target: "es5",
                module: "umd",
                declaration: false,
                noImplicitAny: false,
                removeComments: true,
                emitDecoratorMetadata: false,
                experimentalDecorators: true,
                sourceMap: false,
                moduleResolution: "node",
                suppressImplicitAnyIndexErrors: false
            },
            build : {
                src: ["app/**/*.ts"],
                dest: '../../webroot/js/src/'
            }
        },

Working Config

        ts: {
            options: {
                target: "es5",
                module: "umd",
                declaration: false,
                noImplicitAny: true,
                removeComments: true,
                emitDecoratorMetadata: true,
                experimentalDecorators: true,
                sourceMap: false,
                moduleResolution: "node",
                suppressImplicitAnyIndexErrors: true
            },
            build : {
                src: ["app/**/*.ts"],
                dest: '../../webroot/js/src/'
            }
        },

The problem was caused by emitDecoratorMetadata option which was set to false.

Update to my answer

The above answer will work for ng2 by try to use angular CLI build if possible. With every new release you may have to refactor above config. Also, you will need to specify build config for every lazy loaded module you create while ng-cli does it for you.

Harald Wiesinger · Accepted Answer · 2016-12-21 23:28:41Z

0

in your app. module.ts this should be correct: import { AppRoutingModule} from './app.routing.module';

you have an - there

answered Dec 21, 2016 at 23:28

Harald Wiesinger

6813 gold badges11 silver badges25 bronze badges

1 Comment

mbryja Over a year ago

app-routing.module is correct. I've typed it incorrectly in the question

Collectives™ on Stack Overflow

Angular 2 Can't Resolve Router Dependency

2 Answers 2

Update to my answer

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update to my answer

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related