title: Angular | Guard not firing on routerLink click
body: <p>I am trying to implement a guard for my routes which are for plugins.</p>
  
  <p>I have the concept nailed for it and it does seem to work, however I am having 2 issues and they are as follows:</p>
  
  <ul>
  <li>When clicking on a <code>routerLink</code> from within the Angular app. It doesn't seem to call the guard at all and allows the user to navigate to the route.</li>
  <li>The other issue is that when the route is navigated to via the url e.g <code>/plugins/team-members</code> then the page will not redirect.</li>
  </ul>
  
  <p>Here is my router module:</p>
  
  <pre><code>const routes = {
      path: 'plugin',
      canActivate: [
          BIPluginGuard
      ],
      children: [
          {
              path: 'team-members',
              component: BIPluginTeamMembers
          },
          {
              path: 'sponsors',
              component: BIPluginSponsors
          }
      ]
  };
  </code></pre>
  
  <p>And here is my guard:</p>
  
  <pre><code>canActivate(route: ActivatedRouteSnapshot): boolean {
          const currentRoute: string = route.children[0].routeConfig.path;
  
          const accessiblePlugin: any = this.plugins.find((plugin) =&gt; {
              return plugin.path === currentRoute;
          });
  
          if (!accessiblePlugin || !accessiblePlugin.allowed) {
              this.router.navigate['/dashboard'];
              return false;
          }
  
          return true;
      }
  </code></pre>
  
  <p>This is my first time using a guard so I am unsure as to whether or not I have to put the <code>canActivate</code> on every route, I want to avoid that if possible though.</p>