Angular2 router canActivate no provider for false

Question

So my code looks like this:

export const routes: RouterConfig = [
  { 'path': '', redirectTo: '/jobs', terminal: true, canActivate: [tokenNotExpired()]  },
  { path: 'account', component: AccountComponent, canActivate: [!tokenNotExpired()] },
  { path: 'login', component: LoginComponent },
  ...WihRoutes
];

Whenever I try navigating to "account", the routing fails as it should, but for some reason it also gives the following console error:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): No provider for false!BrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 browser_adapter.ts:82 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:61(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSu bscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 browser_adapter.ts:82 Error: Uncaught (in promise): No provider for false! at resolvePromise (zone.js:538) at zone.js:515 at ZoneDelegate.invoke (zone.js:323) at Object.onInvoke (ng_zone_impl.ts:72) at ZoneDelegate.invoke (zone.js:322) at Zone.run (zone.js:216) at zone.js:571 at ZoneDelegate.invokeTask (zone.js:356) at Object.onInvokeTask (ng_zone_impl.ts:61) at ZoneDelegate.invokeTask (zone.js:355)

Also pic of error because formatting was awful.

I have no clue as to why this happens - anybody else?

Answer 1

The value passed to canActivate: [!tokenNotExpired()] needs to be a provider. !tokenNotExpired() is not a valid provider.

canActivate: ['tokenExpired']
canActivate: ['!tokenExpired']

and provide in bootstrap or with APP_ROUTER_PROVIDERS

bootstrap(AppComponent, [
  {provide: 'tokenExpired', useValue: (a: any, b: any) => tokenExpired()}
  {provide: '!tokenExpired', useValue: (a: any, b: any) => !tokenExpired()}
]);