Why is my Angular 2 router not rendering my component?

Question

I am new to Angular 2, and am trying to get it to render a view component that holds other templates/components. This is what I want rendered on the /home route. Problem: When I go to the /home route, it goes to a blank page rather than rendering my templates. There's no errors in the console.

Here is my home.component.html:

<router-outlet></router-outlet>

<container>
  <header-component></header-component>
  <check-portfolio></check-portfolio>
  <portfolio-carousel></portfolio-carousel>
  <skill-section></skill-section>
  <need-help></need-help>
</container>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Here are some parts of my app.module.ts. I'm not sure if I need anything in my app.component.html, but it's blank:

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    Container,
    Header,
    CheckPortfolioComponent,
    PortfolioCarouselComponent,
    SkillSectionComponent,
    NeedHelpComponent,
    FooterComponent,
    AboutComponent,
    HomeComponent,
    TitleNavComponent,


  ],
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule,
    CarouselModule.forRoot(),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>LucidWebDream</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <script>
    window.__theme = 'bs4';
  </script>
  <app-root></app-root>
</body>

</html>

I've tried putting my home component into the bootstrap array, but had no luck as well.

Update: Here is the git repo if that helps:

i believe you shoud put <router-outlet></router-outlet> in your app.component.html. — guramidev
– guramidev, Commented Oct 27, 2017 at 13:31
@Dream_Cap as guramidev said, your app.component is your entry component. Since it does not have a <router-outlet></router-outlet> your router does not know where to load your HomeComponent — LLai
– LLai, Commented Oct 27, 2017 at 13:34
Thanks alot @guramidev. If you put in the answer, I'll checkmark it. — Dream_Cap
– Dream_Cap, Commented Oct 27, 2017 at 13:40

guramidev · Accepted Answer · 2017-10-27 14:14:10Z

6

You should put <router-outlet></router-outlet> in app.component.html since your app now bootstraps AppComponent and even though you have routes defined it doesn't know what to do next because you have no <router-outlet></router-outlet> in an entry point.

answered Oct 27, 2017 at 14:14

guramidev

2,2381 gold badge17 silver badges19 bronze badges

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

Comments

Ricardo · Accepted Answer · 2017-10-27 13:32:17Z

1

you route should look like this:

const appRoutes: Routes = [ 
   {  path: '', redirectTo: 'home', pathMatch: 'full' }
   { path: 'home', component: HomeComponent },
   { path: '**', component: PageNotFoundComponent }, // default route for page not found
]

that route going to display the component in the main router-outlet from your app, if you want to display others components using the router-outlet from home component, you should write de router like this

const appRoutes: Routes = [ 
   {  path: '', redirectTo: 'home', pathMatch: 'full' }
   { path: 'home', component: HomeComponent, children:[
   {  path: 'list', component: ListComponent } 
] },
       { path: '**', component: PageNotFoundComponent }, // default route for page not found
    ]

answered Oct 27, 2017 at 13:32

Ricardo

2,48722 silver badges35 bronze badges

1 Comment

Dream_Cap Over a year ago

Thanks, but I tried switching the order of routes, and it still had the same effect. I needed <router-outlet> in my root app component.

Collectives™ on Stack Overflow

Why is my Angular 2 router not rendering my component?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related