title: How to solve a problem 'router-outlet' is not a known element?
body: <p>I have app module and shared module. In app-routing module I have:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { SiteLayoutComponent } from &quot;./shared/layouts/site-layout/site-layout.component&quot;;
  import { LoginPageComponent } from &quot;./components/login-page/login-page.component&quot;;
  
  const routes: Routes = [
    {
      path: '',
      component: SiteLayoutComponent,
      children:
        [{path: 'login', component: LoginPageComponent}]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  
  export class AppRoutingModule {}
  </code></pre>
  <p>In app.component.ts:</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;'
  })
  export class AppComponent {
    title = 'TheEda';
  }
  </code></pre>
  <p>In shared module:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { HeaderComponent } from './layouts/header/header.component';
  import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
  
  
  @NgModule({
    declarations: [
      HeaderComponent,
      SiteLayoutComponent
    ],
    imports: [
      CommonModule,
    ]
  })
  export class SharedModule { }
  </code></pre>
  <p>And also in shared module in site-layout component in site-layout.component.html:</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>I have an Error: src/app/shared/layouts/site-layout/site-layout.component.html:1:1 - error NG8001: 'router-outlet' is not a known element.
  How can this be fixed? What is missing in my code?</p>