Child component of another component does not load

Question

Child component of another component does not load

Navigation

#1 by (0 votes)

0

I configured the routes, but the component does not render when the application initializes. I need the posts component to render within the blog component, and the blog already loads correctly.

app.component.html:

<app-navbar></app-navbar>
<!-- corpo da página -->
<router-outlet></router-outlet>

app.routing.module.ts:

const appRoutes: Routes = [
    { path: '', component: BlogComponent},
    { path: 'blog', component: BlogComponent},
    { path: 'candidatos', component: CandidatosComponent},
    { path: 'sobre', component: AboutComponent},
];

blog.component.html:

<div id="conteudo" class="container-fluid">
  <div class="row">
    <div class="col-10">
      hello, world!
      <router-outlet></router-outlet>
    </div>
    <!-- direita -->
    <div class="col-md-2">
      <app-aside></app-aside>
    </div>
  </div>
</div>

blog.routing.module.ts:

const blogRoutes: Routes = [
  { path: 'blog', component: BlogComponent, children: [
      { path: '', component: PostsComponent },
      { path: 'posts', component: PostsComponent },
      { path: 'news', component: NewsComponent },
      { path: 'estudos', component: EstudosComponent }
    ]
  }
];

print showing where to load component posts :

angular angular-routes

asked by anonymous 10.05.2018 / 04:40

1 answer

Problem with Ajax script First Field is null in Each JQUERY

score 0 · Accepted Answer

It tries with the following configuration:

app.routing.module.ts:

const appRoutes: Routes = [
    { path: '',   redirectTo: '/blog', pathMatch: 'full' }
    { path: 'candidatos', component: CandidatosComponent},
    { path: 'sobre', component: AboutComponent},
];

blog.routing.module.ts:

const blogRoutes: Routes = [
      { path: 'blog', component: BlogComponent, children: [
          { path: '', component: PostsComponent },
          { path: 'posts', component: PostsComponent },
          { path: 'news', component: NewsComponent },
          { path: 'estudos', component: EstudosComponent }
        ]
      }
    ];

Do not forget about the app.module.ts import the blog module before AppRoutingModule