Angular 5 routerLink无法正常工作问题求助

Hey there, let's dive into troubleshooting your Angular 5 routerLink issue. Based on the partial route module code you shared, here are the most common fixes to check step by step:

First off, make sure your routing module (e.g., AppRoutingModule) is registered in the imports array of your root AppModule—this is a super common oversight:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // Import your routing module
import { AppComponent } from './app.component';
// Don't forget to declare all your components here
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { AdminDishesComponent } from './admin/adminDishes/adminDishes.component';
import { AdminCategoriesComponent } from './admin/adminCategories/adminCategories.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    AdminComponent,
    AdminDishesComponent,
    AdminCategoriesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // Critical: Add routing module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Your provided route code is incomplete—ensure your appRoutes array is fully defined and exported correctly with RouterModule.forRoot():

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { AdminDishesComponent } from './admin/adminDishes/adminDishes.component';
import { AdminCategoriesComponent } from './admin/adminCategories/adminCategories.component';

const appRoutes: Routes = [
  // Set a default route to avoid empty router-outlet
  { path: '', redirectTo: '/user', pathMatch: 'full' },
  { path: 'user', component: UserComponent },
  // Nest child routes properly for admin section
  { 
    path: 'admin', 
    component: AdminComponent,
    children: [
      { path: 'dishes', component: AdminDishesComponent },
      { path: 'categories', component: AdminCategoriesComponent }
    ]
  },
  // Catch-all route for undefined paths
  { path: '**', redirectTo: '/user' }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule] // Must export to make routerLink available in components
})
export class AppRoutingModule { }

• Check routerLink syntax:
  • For top-level routes, use absolute paths:

    <a routerLink="/user">User Dashboard</a>
    <a routerLink="/admin">Admin Panel</a>
    

  • For child routes (inside AdminComponent), you can use relative paths for cleaner code:

    <!-- Inside admin.component.html -->
    <a routerLink="./dishes">Manage Dishes</a>
    <a routerLink="./categories">Manage Categories</a>
    

• Ensure <router-outlet> exists: This tag is where routed components render—usually placed in your AppComponent template:

  <!-- app.component.html -->
  <nav>
    <a routerLink="/user">User</a>
    <a routerLink="/admin">Admin</a>
  </nav>
  <!-- Required: Router outlet container -->
  <router-outlet></router-outlet>
  

Angular 5 requires matching versions for all core packages. Run this command to confirm @angular/router matches your @angular/core version:

npm list @angular/core @angular/router

If versions don't align, reinstall the matching router version:

npm install @angular/router@5.2.11 --save

Sometimes cached build files cause weird routing glitches. Stop your Angular dev server, delete the node_modules/.cache folder (or restart your IDE), then restart the server:

ng serve --open

If none of these fix the issue, feel free to share:

• Your full routing module code
• The component template where you're using routerLink
• Any error messages from the browser console

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