Upgrade from Angular 13 to 14 - routing problem -Error: NG04014

Question

I get this error Error: NG04014: Invalid configuration of route 'inspect//': redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed. after upgrading angular 13 to 14. Anyone can help ?

Answer 1

1) Answer to the question

redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed.

In Angular 14, you can no longer use them both in the same configuration. Choose between redirectTo and CanActivate in your inspect/ route configuration, keep the most reliable for your case and you should be good to go.

2) About NG04014 error

If you stumble on this error

Error: NG04014: Invalid configuration of route '[your_route]/'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren

As the error says, Angular 14 is not permitting route configuration without providing one of the attribute above; You might have route configs with only a CanActivate which was working fine in Angular < 14. To get around this error, add children: [] to your route config :

  {
    path: '[your_route]',
    canActivate: [your_redirect],
    children: []
  },

3) Ressources & useful links you might want to check for more information https://github.com/angular/angular/issues/13373

Answer 2

I think it's related to validating the router lazy loaded configs, which was listed in the Angular 14 Router breaking changes:

Lazy loaded configs are now also validated once loaded like the initial set of routes are. Lazy loaded modules which have invalid Route configs will now error. Note that this is only done in dev mode so there is no production impact of this change.

I think you have two options here to handle it correctly:

1. Handle the redirect in the guard by returning a UrlTree:

If any guard returns a UrlTree, the current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard. https://angular.io/api/router/CanActivate

2. Move/Apply the canActivate guard on the route specified in the redirectTo, without applying it on the same route.