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.

Litter

Is this with ng serve or attempting to host the contents of ng build? If you're running into this problem with ng serve please post your full app.module.ts. If you're attempting to host the dist version, please see my answer below (updated). – Bunchy

show all your routes – Tessatessellate

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

Pasia

This. Can't believe it is so simple! – Litter

I have the exact same problem. I already have the <router-outlet> selector in my app.component.html, however I'm still running into the same issue. What else could I do? – Pr

@LostAtSea the issue might be on your href attribute, if it's link to "", it will most likely go to home no matter what the value of your 'routerLink' is. – Silent

Answer 2

I found the other post Angular2 - app.module routing: blank path not redirecting to component to resolve my issue. When I switched from:

export const ROUTES: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent  }
];

to

export const ROUTES: Routes = [
  { path: 'dashboard', component: DashboardComponent  },
  { path: '', component: LoginComponent }
];

it started to work.

Linzy

Answer 3

The most likely problem is that you haven't imported the RouterModule or Routes.

Be sure to include:

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

edit: In the previous answer I included a possible other problem, but Routes doesn't need to be typed. If you've included both of these this is likely a browser related error (this happens on apache servers without route parameter forwarding enabled). If you are trying to ng build and use the dist files you'll need to enable parameter forwarding. See this post on github. You should still be able to run your app locally with ng serve without problems.

Bunchy

Answer 4

I was just having this problem while working on a large project and in my case it was that the route I was putting in my address bar had an ID at the end of it (e.g. /my-route/123), but my actual defined route didn't specify that there should be an ID (e.g. /my-route), and so I was just being redirected to the fallback route, which was the homepage.

Danny

Answer 5

Thanks to Rahul Singh,i found the error in my code as well.

For me, the problem was not the absence of in app.component.html rather the presence of other selectors for footer and header which were apparently fetching data from some services. I commented those extra selectors and kept only router-outlet and the components started loading without refresh. Fixing the other selctors was easy after i found the main issue,

Garnett