Angular routing always redirect to home page

Question

I've been spending far too much time on this apparently simple problem. I have a route, page2 defined as follow:

// app.module.ts
import { Page2Component } from './page2/page2.component';

@NgModule({
  declarations: [
    AppComponent,
    Page2Component
  ],
  imports: [
    BrowserModule, RouterModule.forRoot([
      { path: 'page2', component: Page2Component },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I've checked that <base href="/"> in index.html. However, when I manually type in http://localhost:4200/page2, I'm always redirected back to the home page (defined in app.component).

I went over the quick start guide times and times again but could not figure why. What was wrong with my route definition?

---

Edit: I tested it with a brand new app (via ng new test-app) and new page2 component (ng generate component page2). Still the same problem. I'm more confused the ever now.

Answer 1

I guess you are missed adding <router-outlet></router-outlet> to your App.component.html,

Add it in the app.component.html where you want to load your route component