Angular routes to components inside a component

Question

I´m building a nav component in angular, that allows the user to go to a component inside the App.component. This nav component is also inside the App component. All of the components are shown from the begin, i wanted the nav was able to find the component that is already shown in the App component.

I tried to put the nav in the App component hardcoded, but it didn't work.

This is my App.component.html where i call all of the componentes, this is the parent component.

<app-slideshow></app-slideshow>
<!--others-->
<app-dashboard></app-dashboard>  //<-- component where the nav is
<router-outlet></router-outlet>

This is my app-routing.module.ts where i defined the routes to the components

const parentModuleRoutes: Routes = [
{
  path: 'home',            //<---- parent component declared here
  component: AppComponent,
  children: [                          //<---- child components 
declared here
      {
          path:'slideshow',
          component: SlideshowComponent
      },
      {
          path:'about',
          component: AboutComponent
      },
      {
          path:'service',
          component: ServiceComponent
      },
      {
          path:'explore',
          component: WorksComponent
      },
      {
        path:'contact',
        component: ContactComponent
    },
  ]
 }
];

This is the dashboard component where the nav element is build and where I want to create the link with a component

<nav>
<ul>
  <li>
  <a routerLink="/home/slideshow">
    <p>Home</p>
  </a>
</li>
<li>
  <a routerLink="/home/about">
    <p>About Us</p>
  </a>
</li>
<li>
    <a routerLink="/home/service">
      <p>Service</p>
    </a>
  </li>
  <li>
    <a routerLink="/home/explore">
      <p>Explore</p>
    </a>
  </li>
  <li>
    <a routerLink="/home/contact">
      <p>Contact Us</p>
    </a>
  </li>
</ul>
</nav>

The console prints this three errors, because the router-outlet is defined on the app component(parent):

ERROR Error: StaticInjectorError(AppModule)[RouterOutlet -> 
ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> 
ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

ERROR CONTEXT DebugContext_
View_AppComponent_0 @ AppComponent.html:16


Error: StaticInjectorError(AppModule)[RouterOutlet -> 
ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> 
ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

If you only have a single router-outlet you can use Angular's Router pretty straight forward. You don't need to nest anything. Just remove the "home"-route and declare the routes toplevel in your `app-routing.module.ts`. — tommueller, Jan 30 '19 at 14:29
So i tried your idea @tommueller, but every time i "clicked" a link it generates the component in the final of the page(app.component) and i wanted the link to go to the component that's inside the app.component. — Luis Luis Maia Maia, Jan 30 '19 at 14:58
@TusharWalzade i used 'RouterModule.forChild(parentModuleRoutes)' in the import — Luis Luis Maia Maia, Jan 30 '19 at 14:59

score 0 · Accepted Answer · answered Apr 17 '19 at 15:49

The trick is create the layout components and call it in the app.component, so when u want to change to another component with a navbar for exemple, u can use it go to /about or /service, with changing the rest of the layout.

App.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-routing.module.ts

const parentModuleRoutes: Routes = [
      {
          path:'slideshow',
          component: SlideshowComponent
      },
      {
          path:'about',
          component: AboutComponent
      },
      {
          path:'service',
          component: ServiceComponent
      },
      {
          path:'explore',
          component: WorksComponent
      },
      {
        path:'contact',
        component: ContactComponent
    }

];

Angular routes to components inside a component

1 Answers1