Angular路由问题：无法正确跳转至NotFoundComponent

问题核心 #

你遇到的问题本质是路由匹配顺序错误+子路由模块未正确注册，导致合法的用户/管理员Dashboard路径被通配符路由提前拦截，最终跳转到404页面。

解决步骤 #

1. 修正AppRoutingModule的路由结构 #

通配符路由（path: '**'）必须放在所有路由的最后，同时要确保User、Admin、Login的子路由模块被正确导入，让合法路径先被匹配。

修改后的AppRoutingModule代码：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotfoundComponent } from './notfound/notfound.component';
import { LoginRoutingModule } from './login/login-routing.module';
import { UserRoutingModule } from './user/user-routing.module';
import { AdminRoutingModule } from './admin/admin-routing.module';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  // 404路由和通配符路由必须放在最后
  { path: '404', component: NotfoundComponent },
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    // 按顺序导入子路由模块，确保它们的路由先被注册
    LoginRoutingModule,
    UserRoutingModule,
    AdminRoutingModule
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 确保子路由模块使用forChild()注册 #

User和Admin的路由模块必须用RouterModule.forChild()定义，避免重复初始化路由服务，这是Angular子路由的规范写法：

UserRoutingModule修正

// user-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件和AuthGuard
const routes: Routes = [
  { 
    path: 'user-dashboard', 
    component: UserLayoutComponent, 
    canActivate: [AuthGuard],
    children: [
      { path: '', component: UserDashboardComponent},
      { path: 'profilo-user', component: ProfilouserComponent},
      { path: 'preferiti', component: CarrelloComponent},
      { path: 'contatti', component: ContattiComponent},
      { path: 'prodotti-negozio', component: ProdottiNegozioComponent}
    ]
  },
]; 

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

AdminRoutingModule修正

// admin-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件和AuthGuard
const routes: Routes = [
  { 
    path: 'admin-dashboard', 
    component: AdminLayoutComponent, 
    canActivate: [AuthGuard], 
    canActivateChild: [AuthGuard], 
    children: [
      { path: '', component: AdminDashboardComponent},
      { path: 'profilo-admin', component: ProfiloadminComponent},
      { path: 'users', component: UsersComponent},
      { path: 'work-in-progress', component: WorkInProgressComponent}
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

3. 修复AuthGuard的角色校验逻辑 #

确保AuthGuard能精准区分用户角色，避免合法路径被错误拦截：

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | UrlTree {
    const currentUser = this.authService.getCurrentUser();
    if (!currentUser) {
      // 未登录跳转登录页
      return this.router.createUrlTree(['/login']);
    }

    // 根据路由路径校验角色
    if (state.url.includes('admin-dashboard') && currentUser.role !== 'admin') {
      return this.router.createUrlTree(['/404']);
    }
    if (state.url.includes('user-dashboard') && currentUser.role !== 'user') {
      return this.router.createUrlTree(['/404']);
    }

    // 角色匹配，允许访问
    return true;
  }
}

4. 验证登录跳转逻辑 #

确保登录组件根据用户角色跳转到正确的Dashboard：

// login.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private authService: AuthService, private router: Router) {}

  onLogin(credentials: { username: string, password: string }) {
    this.authService.login(credentials).subscribe(user => {
      user.role === 'admin' 
        ? this.router.navigate(['/admin-dashboard']) 
        : this.router.navigate(['/user-dashboard']);
    });
  }
}

关键注意事项 #

• 通配符路由必须放在所有路由的最后，Angular路由按顺序匹配，提前放置会拦截所有未匹配的合法路径。
• 根路由用RouterModule.forRoot()，子路由用RouterModule.forChild()，确保路由服务单例。
• AuthGuard的角色校验要精准，避免因逻辑错误导致合法用户被拦截。

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