Angular 5特性模块嵌套路由问题求助：登录模块路由配置失效

Hey Mike, let's work through your routing problem for your multi-module web app. From what you've described, you need nested routing within your Login Module to load the form components into your base layout—and here's exactly how to set that up:

1. Structure Your Login Module with Nested Routes #

The core idea here is to use nested routing where your LoginBaseComponent acts as the parent layout, and your form components (login/forgot password) are child routes that render inside the base component.

First, create a dedicated routing module for your Login Module (e.g., login-routing.module.ts):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginBaseComponent } from './login-base/login-base.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';

const routes: Routes = [
  {
    path: '', // This pairs with the root route's path for the login module
    component: LoginBaseComponent,
    children: [
      // Default to login form when accessing the base login path
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginFormComponent },
      { path: 'forgot-password', component: ForgotPasswordFormComponent }
      // Add other login-related child routes here
    ]
  }
];

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

2. Update Your Login Module #

Make sure your LoginModule imports the routing module and declares all relevant components:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginRoutingModule } from './login-routing.module';
// Import your components
import { LoginBaseComponent } from './login-base/login-base.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
// Add form modules if needed (e.g., ReactiveFormsModule)

@NgModule({
  declarations: [
    LoginBaseComponent,
    LoginFormComponent,
    ForgotPasswordFormComponent
    // Include other login module components here
  ],
  imports: [
    CommonModule,
    LoginRoutingModule,
    // ReactiveFormsModule, FormsModule (uncomment if using forms)
  ]
})
export class LoginModule { }

3. Add a Router Outlet to Your Login Base Component #

For the child form components to render inside your base layout, add a <router-outlet> in the template of LoginBaseComponent:

<!-- Example LoginBaseComponent template -->
<div class="login-page-layout">
  <div class="login-header">
    <!-- Your header content (logo, etc.) -->
  </div>
  
  <!-- This is where login/forgot password forms will load -->
  <div class="login-form-container">
    <router-outlet></router-outlet>
  </div>
  
  <div class="login-footer">
    <!-- Footer links, copyright, etc. -->
  </div>
</div>

4. Configure Root App Routing #

Now link your Login Module to the root app routing. We'll use lazy loading (best practice for multi-module apps to optimize initial load time):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'auth',
    // Lazy load the Login Module when the /auth path is accessed
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  // Redirect root path to the login module by default
  { path: '', redirectTo: '/auth', pathMatch: 'full' },
  // Add other root routes (e.g., dashboard) here
];

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

Key Notes & Troubleshooting #

• Route Paths: Your final routes will be /auth/login (login form) and /auth/forgot-password (forgot password form)—clean and aligned with your modular structure.
• Lazy Loading: If you prefer eager loading (load the Login Module on app start), just import LoginModule directly into your AppModule instead of using loadChildren.
• Router Outlet Check: Double-check that LoginBaseComponent has the <router-outlet>—without it, child components won't render.
• Path Matching: The pathMatch: 'full' on the default redirect ensures the app only redirects when the exact root path is accessed.

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