Angular通配符路由失效：所有路由均被判定为无效路由并重定向

你用错了loadChildren的用法：Angular要求loadChildren必须返回一个能解析出Angular模块的Promise，但你的通配符路由里，loadChildren返回的Promise根本没resolve任何模块，导致Angular路由解析失败，所有正常路由也被触发通配符逻辑，当成无效路径处理。

别用loadChildren做外部跳转，换两种合规的方式：

方式一：用路由守卫实现跳转 #

1. 先写一个守卫类：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class ExternalRedirectGuard implements CanActivate {
  canActivate(): boolean {
    window.location.href = '/external-link';
    return false;
  }
}

2. 修改路由配置：

{
  path: "login", 
  loadChildren: () => import("./modules/loginpage.module").then(s => s.loginpageModule),
  data: { title: 'login', showbreadcrumb: 'false' }
},
{ 
  path: "signup", 
  loadChildren: () => import("./modules/signuppage.module").then(s => s.signuppageModule), 
  data: { title: 'signup', showbreadcrumb: 'false' }
},
{
  path: "**",
  canActivate: [ExternalRedirectGuard]
}

方式二：用空组件跳转 #

1. 写一个仅包含跳转逻辑的空组件：

import { Component, OnInit } from '@angular/core';

@Component({ template: '' })
export class RedirectComponent implements OnInit {
  ngOnInit(): void {
    window.location.href = '/external-link';
  }
}

2. 在路由模块中注册该组件，再修改路由配置：

// 先导入组件
import { RedirectComponent } from './redirect.component';

// 路由配置部分
{
  path: "login", 
  loadChildren: () => import("./modules/loginpage.module").then(s => s.loginpageModule),
  data: { title: 'login', showbreadcrumb: 'false' }
},
{ 
  path: "signup", 
  loadChildren: () => import("./modules/signuppage.module").then(s => s.signuppageModule), 
  data: { title: 'signup', showbreadcrumb: 'false' }
},
{
  path: "**",
  component: RedirectComponent
}

• loadChildren是专门用来懒加载Angular模块的，别拿来做跳转操作，完全不符合它的API设计。
• 上述两种方法都会正常匹配login、signup等有效路由，仅当路径不匹配时才会触发外部跳转。

内容的提问来源于stack exchange，提问作者ConstantLearner