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:

Answer 1

您应该将<router-outlet></router-outlet>放在app.component.html因为您的应用程序现在会引导AppComponent ，即使您定义了路由，它也不知道下一步要做什么，因为您没有<router-outlet></router-outlet>在入口点中。

Answer 2

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
    ]

Why is my Angular 2 router not rendering my component?

Question

2 answers

solution1
4 ACCPTED 2017-10-27 14:14:10

solution2
1 2017-10-27 13:32:17

Why is my Angular 2 router not rendering my component?

Question

2 answers

solution1 4 ACCPTED 2017-10-27 14:14:10

solution2 1 2017-10-27 13:32:17

solution1
4 ACCPTED 2017-10-27 14:14:10

solution2
1 2017-10-27 13:32:17