15

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.

Mike Henderson
  • 2,028
  • 1
  • 13
  • 32
  • 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). – Z. Bagley Sep 02 '17 at 02:27
  • show all your routes – Max Koretskyi Sep 02 '17 at 04:16

3 Answers3

27

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

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • 2
    This. Can't believe it is so simple! – Mike Henderson Sep 02 '17 at 19:13
  • 1
    I have the exact same problem. I already have the `` selector in my app.component.html, however I'm still running into the same issue. What else could I do? – LostAtSea Jan 25 '21 at 14:41
  • @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. – Shan Surat Jul 07 '21 at 06:31
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.

Greg Wozniak
  • 5,209
  • 3
  • 26
  • 29
0

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.

Z. Bagley
  • 8,942
  • 1
  • 40
  • 52