Angular 2: TypeError: is not a function
12:41 28 Feb 2017

I'm working on an Angular 2 application, scaffolded with angular-cli RC0. I've set up an AuthGuard, to protect some routes. this guard implements CanActivate and if not logged in redirects the user to the login page, and an Angular Material2 MdSbackBar should appear with a custom message. Here is the AuthGuard:

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private authService: AuthService,
    private growlerService: GrowlerService
  ) { }

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['auth/login']);
      this.growlerService.growl('Autenticazione richiesta', GrowlerMessageType.Error);
      return false;
    }
  }

}

Here is the growler service that is called in the CanActivate method as shown above:

@Injectable()
export class GrowlerService {

  constructor() { }

  growl: (message: string, type: GrowlerMessageType) => void;

}

Finally the actual function in growler component

export class GrowlerComponent {

  constructor(
    private snackBar: MdSnackBar,
    private growlerService: GrowlerService
  ) {
    growlerService.growl = this.growl.bind(this);
  }

  growl(message: string, type: GrowlerMessageType): void {
    const growlerConfig = new MdSnackBarConfig();
    growlerConfig.duration = 3000;
    growlerConfig.extraClasses = this.growlerTypeClass(type);
    this.snackBar.open(message, null, growlerConfig);
  }
  
}

Everything is imported/exported correctly and the growler works when not called from the CanActivate. In order to build this I've followed this example, replacing the growler component, in the example, with an angular material component. GrowlerTypeClass is a private method defined in the growler component but that is not the problem. The problem is that when the user is not logged in and canActivate tries to call the growler service I get the following error in the console:

EXCEPTION: Uncaught (in promise): TypeError: this.growlerService.growl is not a function
TypeError: this.growlerService.growl is not a function
    at AuthGuard.webpackJsonp.259.AuthGuard.canActivate

Thanks in advance for you help.

angular angular-material