Angular routing always redirect to home page

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.

Continue reading...