title: Angular 2: TypeError: is not a function
body: <p>I'm working on an Angular 2 application, scaffolded with angular-cli RC0.
  I've setup an AuthGuard, to protect some routes. this guard, implements CanActivate and if not logged in redirect the user to the login page and an <a href="https://material.angular.io/components/component/snack-bar" rel="nofollow noreferrer">Angular Material2 MdSbackBar</a> should appear with a custom message.
  Here the AuthGuard:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@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;
      }
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here the growler service that is called in the CanActivate method as shown above:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Injectable()
  export class GrowlerService {
  
    constructor() { }
  
    growl: (message: string, type: GrowlerMessageType) =&gt; void;
  
  }
  </code></pre>
  
  <p>Finally the actual function in growler component</p>
  
  <pre class="lang-ts prettyprint-override"><code>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);
    }
  
  }
  </code></pre>
  
  <p>Everything is imported/exported correctly and growler works when not called from the CanActivate. In order to build this i've followed <a href="https://github.com/DanWahlin/Angular-JumpStart" rel="nofollow noreferrer">this example</a>, replacing the growler component, in the example, with an angular material component. GrowlerTypeClass is a private method defined in growler component but that is not the problem.
  Problem is that when user is not logged in and canActivate try to call the growler service i get the following error in console:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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
  </code></pre>
  
  <p>Thanks in advance for you help.</p>