Errors when adding a guard to a route using @angular/router 3.0.0-rc.1

Question

When I have the following code ...

I receive no errors and I am able to cleanly navigate to the pascal component within the pascal module

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {SuiteModule} from './modules/suite.module';

platformBrowserDynamic().bootstrapModule(SuiteModule);

suite.module.ts

import {NgModule} from '@angular/core';

import {Title} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {AuthenticationModule} from './authentication.module';

import {HomeModule} from './home.module';
import {PascalModule} from './pascal.module';
import {CopernicusModule} from './copernicus.module';

import {SuiteComponent} from './suite.module/suite.component';
import {suiteRouting, suiteRoutingProviders} from './suite.module/suite.routing';

@NgModule({
    imports: [RouterModule, AuthenticationModule, HomeModule, PascalModule, CopernicusModule, suiteRouting],
    providers: [Title, suiteRoutingProviders],
    declarations: [SuiteComponent],
    bootstrap: [SuiteComponent]
})
export class SuiteModule {}

pascal.module.ts

import {NgModule} from '@angular/core';

import {pascalRouting, pascalRoutingProviders} from './pascal.module/pascal.routing';

import {CommonModule} from './common.module';
import {AuthenticationModule} from './authentication.module';

import {PascalComponent} from './pascal.module/pascal.component';

@NgModule({
    imports: [CommonModule, AuthenticationModule, pascalRouting],
    providers: [pascalRoutingProviders],
    declarations: [PascalComponent]
})
export class PascalModule {}

pascal.routing.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {PascalComponent} from './pascal.component';

export const pascalRoutes: Routes = [
    {path: 'pascal', pathMatch: 'full', component: PascalComponent}
];

export const pascalRouting: ModuleWithProviders = RouterModule.forRoot(pascalRoutes);

export const pascalRoutingProviders: any[] = [];

---

When I add the following guard class:

pascal.guard.ts

import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';

import {AuthenticationService} from '../authentication.module/authentication.service';

import {Observable} from 'rxjs';

export class PascalGuard implements CanActivate {
    constructor(private authenticationService: AuthenticationService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.authenticationService.isAuthenticated;
    }
}

And attempt to wire it into the application:

pascal.module.ts

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import {CommonModule} from './common.module';
import {AuthenticationModule} from './authentication.module';
import {AuthenticationService} from './authentication.module/authentication.service';

import {pascalRouting, pascalRoutingProviders} from './pascal.module/pascal.routing';

import {PascalComponent} from './pascal.module/pascal.component';

@NgModule({
    imports: [CommonModule, RouterModule, AuthenticationModule, pascalRouting],
    providers: [AuthenticationService, pascalRoutingProviders],
    declarations: [PascalComponent]
})
export class PascalModule {}

pascal.routing.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {PascalComponent} from './pascal.component';
import {PascalGuard} from './pascal.guard';

export const pascalRoutes: Routes = [
    {path: 'pascal', pathMatch: 'full', component: PascalComponent, canActivate: [PascalGuard]}
];

export const pascalRouting: ModuleWithProviders = RouterModule.forRoot(pascalRoutes);

export const pascalRoutingProviders = [PascalGuard];

I get the following error:

zone.js:332 Error: (SystemJS) Can't resolve all parameters for PascalGuard: (?).
    Error: Can't resolve all parameters for PascalGuard: (?).
        at new BaseException (http://localhost:8880/vendor/@angular/compiler/src/facade/exceptions.js:27:23)
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:551:19)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:448:26)
        at eval (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:594:41)
        at Array.forEach (native)
        at CompileMetadataResolver.getProvidersMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:575:19)
        at eval (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:582:41)
        at Array.forEach (native)
        at CompileMetadataResolver.getProvidersMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:575:19)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:305:58)
    Evaluating http://localhost:8880/bootstrap.js
    Error loading http://localhost:8880/bootstrap.js

Adding @Injectable to the guard class causes the following error:

zone.js:332 Error: (SystemJS) Can't resolve all parameters for TypeDecorator: (?).
    Error: Can't resolve all parameters for TypeDecorator: (?).
        at new BaseException (http://localhost:8880/vendor/@angular/compiler/src/facade/exceptions.js:27:23)
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:551:19)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:448:26)
        at eval (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:594:41)
        at Array.forEach (native)
        at CompileMetadataResolver.getProvidersMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:575:19)
        at eval (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:582:41)
        at Array.forEach (native)
        at CompileMetadataResolver.getProvidersMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:575:19)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8880/vendor/@angular/compiler/src/metadata_resolver.js:305:58)
    Evaluating http://localhost:8880/bootstrap.js
    Error loading http://localhost:8880/bootstrap.js

Answer 1

If a service has constructor parameters it needs to have the @Injectable() decorator

@Injectable()
export class PascalGuard implements CanActivate {