refactor(router): Produce error message when canActivate is used with redirectTo (#40067)

Redirects in the router are processed before activations. This means that a canActivate will
never execute if a route has a redirect. Rather than silently ignoring
the invalid config, developers should be notified so they know why it
doesn't work.

Closes #18605
The feature request for a function/class redirect is covered in #13373.

PR Close #40067

packages/router/src/utils/config.ts

@@ -58,6 +58,12 @@ function validateNode(route: Route, fullPath: string): void {
       throw new Error(`Invalid configuration of route '${
           fullPath}': redirectTo and component cannot be used together`);
     }
+    if (route.redirectTo && route.canActivate) {
+      throw new Error(
+          `Invalid configuration of route '${
+              fullPath}': redirectTo and canActivate cannot be used together. Redirects happen before activation ` +
+          `so canActivate will never be executed.`);
+    }
     if (route.path && route.matcher) {
       throw new Error(
           `Invalid configuration of route '${fullPath}': path and matcher cannot be used together`);

packages/router/test/config.spec.ts

@@ -98,6 +98,15 @@ describe('config', () => {
               `Invalid configuration of route 'a': redirectTo and component cannot be used together`);
     });
 
+    it('should throw when component and redirectTo are used together', () => {
+      expect(() => {
+        validateConfig([{path: 'a', redirectTo: 'b', canActivate: []}]);
+      })
+          .toThrowError(
+              `Invalid configuration of route 'a': redirectTo and canActivate cannot be used together. ` +
+              `Redirects happen before activation so canActivate will never be executed.`);
+    });
+
     it('should throw when path and matcher are used together', () => {
       expect(() => {
         validateConfig([{path: 'a', matcher: <any>'someFunc', children: []}]);