Angular Nested Routes router.js:2121 A router outlet has not been instantiated during routes activation

I’m trying to created nested routes in angular. The related route in my app-routing.module.ts looks like this.

  {
    path: 'home',
    component: SidebarLayoutComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },
    ],
  },

I’m using two router-outlets. On in the AppComponent and on in SidebarLayoutComponent. There is nothing special in the templates just <router-outlet></router-outlet>.

If the /home route is called I’m receiving this warning in the browser console and the content of HomeComponent won’t be displayed.

router.js:2121 A router outlet has not been instantiated during routes activation. URL Segment: 'home'

In the dev-server console I get this error

 ERROR in apps/customer-interface/src/app/components/sidebar-layout/sidebar-layout.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:

All components (SidebarLayoutComponent , HomeComponent and AppComponent) are part of the AppModule.

What is the problem? Why is <router-outlet> not a known element. The curious is that the <router-outlet> in AppComponent works as excepted. Only the <router-outlet> in SidebarLayoutComponent is effected from the problem.

Source: Angular Questions