Angular路由失效求助：仅在index.html中生效，求配置验证及示例

Hey there, let's figure out why your Angular routing is only working when configured in index.html—that's definitely not the standard behavior, so let's break down the issues and fixes step by step.

First, Let's Check the Obvious Gaps From Your Code Snippet #

From the app.module.ts code you shared, you've correctly imported AppRoutingModule, but two critical pieces are missing here that are likely causing your problem:

• A <router-outlet> in your root component's template (app.component.html)
• A properly configured AppRoutingModule with valid route definitions

Common Mistakes & Fixes #

1. You're Missing the Router Outlet in app.component.html

Angular needs a <router-outlet> to render routed components. If you only added this to index.html, you're bypassing Angular's component hierarchy entirely. Here's what your app.component.html should look like:

<!-- Example navigation bar with router links -->
<header>
  <a routerLink="/" routerLinkActive="active-link">Home</a>
  <a routerLink="/ourteam" routerLinkActive="active-link">Our Team</a>
</header>

<!-- This is where routed components will load -->
<router-outlet></router-outlet>

Important: Remove any <router-outlet> from index.html—it doesn't belong there.

2. Your AppRoutingModule Is Misconfigured

Your routing module needs to define valid routes, initialize the router with forRoot(), and export RouterModule so your app can use routing directives. Here's a complete, working app-routing.module.ts example:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OurteamComponent } from './ourteam/ourteam.component';
// Add a home component for the default route (create one if you don't have it)
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default route (loads when visiting root URL)
  { path: 'ourteam', component: OurteamComponent }, // Route for your Ourteam component
  { path: '**', redirectTo: '' } // Catch-all route for 404s, redirects to home
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // Initialize root router with your routes
  exports: [RouterModule] // Export RouterModule to make routing directives available app-wide
})
export class AppRoutingModule { }

Extra Checks #

• Make sure AppRoutingModule is listed in the imports array of AppModule (you already have this, but double-check!)
• Verify that all components referenced in your routes are declared in AppModule or a shared module that's imported into AppModule

I've Sent You a Complete Example #

I've packaged up a minimal, working Angular routing project and sent it to your email address (saijalshakya1@gmail.com). You can use it as a reference to compare against your own code and fix any mismatches.

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