Angular routing - component not showing up

Question

I have been trying to route from my homepage to load other components HTML, it doesn't work. The homepage keeps showing up while the address changes to the one I set -

app.module.ts is the following:

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    TabsComponent,
    AboutComponent,
    LessonsComponent
  ],
  imports: [
    RouterModule.forRoot([

      { path: 'tabs', component: TabsComponent},
      { path: 'register', component: RegisterComponent},
      { path: 'lessons',component: LessonsComponent},
      { path: 'about', component: AboutComponent},
      { path: 'app',component: AppComponent},
    ]),

these are my links in my app.component.html:

<div>
    <ul class="navbar">
          <li><a routerLink="/register" routerLinkActive="active">Register</a></li>
          <li><a routerLink="/tabs" routerLinkActive="active">Tabs</a></li>
          <li><a routerLink="/app" routerLinkActive="active">Home</a></li>
          <li><a routerLink="/lessons" routerLinkActive="active">Lessons</a></li>
          <li style="float:right"><a routerLink="/about" routerLinkActive="active">About</a></li>
      </ul>
</div>

For example, if I press the register link I will get to "http://localhost:4200/register", but It stays on the app.component.html

can you check if there are any errors in the browser console? If there are, navigation to new component will not run. — Serdar
– Serdar, Commented Oct 7, 2019 at 10:15
meaning I must fix these errors before it'll load? there are four errors. and those are concerning youtube embed videos — Amit Blaier
– Amit Blaier, Commented Oct 7, 2019 at 10:20
Can you fix them or still need help? If you use chrome, angular will provide more user friendly error messages. Probably there is a root cause which creates all those errors — Serdar
– Serdar, Commented Oct 7, 2019 at 10:22
I do need help, I have tried to place the <router-outlet></router-outlet> in my app.component.html but it makes my homepage show twice instead of once and the links aren't working. — Amit Blaier
– Amit Blaier, Commented Oct 7, 2019 at 10:24

Darshit Makasana · Accepted Answer · 2019-10-07 10:40:31Z

1

Angular Routing

Angular routing is not working in app.module.ts now.in this case you need to add that path and component in App.routingmodule.ts. like this....

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

answered Oct 7, 2019 at 10:40

Darshit Makasana

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular routing - component not showing up

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related