title: 'component' is not a known element in Angular 6
body: <p>I have a problem when i work with angular, this is my project structure (begin from app folder, please look at super-admin folder) :</p>
  <pre><code>- Modules
  ---- home [+]
  ---- admin [+]
  ---- super-admin
  -------- super-admin-routing.module.ts
  -------- super-admin.module.ts
  -------- (And html, scss, component file)
  -------- pages
  ------------ auth [+]
  ------------ unauth [+]
  ------------ shared
  ---------------- shared.component.ts
  ---------------- (And html, scss file)
  - cores [+]
  - config [+]
  - shared [+]
  - strores [+]
  - app-routing.module.ts
  - app.module.ts
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  @NgModule({
    declarations: [
      AppComponent,
  
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>app-routing.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './modules/home/home.component';
  import { AdminComponent } from './modules/admin/admin.component';
  import { SuperAdminComponent } from './modules/super-admin/super-admin.component';
  
  const routes: Routes = [
      {
          path: &quot;&quot;,
          component: HomeComponent
      },
      {
          path: &quot;home&quot;,
          component: HomeComponent
      },
      {
          path: &quot;admin&quot;,
          component: AdminComponent
      },
      {
          path: &quot;super-admin&quot;,
          component: SuperAdminComponent,
          loadChildren: './modules/super-admin/super-admin.module#SuperAdminModule'
      },
      {
          path: &quot;**&quot;,
          component: HomeComponent
      }
  ];
  
  @NgModule({
      declarations: [
          HomeComponent,
          AdminComponent,
          SuperAdminComponent
      ],
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>super-admin.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { SuperAdminRoutingModule } from './super-admin-routing.module';
  import { SharedComponent } from './pages/shared/shared.component';
  
  @NgModule({
    imports: [
      CommonModule,
      SuperAdminRoutingModule
    ],
    declarations: [SharedComponent]
  })
  export class SuperAdminModule { }
  </code></pre>
  <p>super-admin-routing.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { LoginComponent } from './pages/login/login.component';
  import { AuthComponent } from './pages/auth/auth.component';
  
  
  const routes: Routes = [
      {
          path: &quot;login&quot;,
          component: LoginComponent
      },
      {
          path: &quot;&quot;,
          component: AuthComponent,
          loadChildren: &quot;./pages/auth/auth.module#AuthModule&quot;
      },
      {
          path: &quot;home&quot;,
          component: AuthComponent,
          loadChildren: &quot;./pages/auth/auth.module#AuthModule&quot;
      },
      {
          path: &quot;**&quot;,
          component: AuthComponent
      },
      
  ];
  
  @NgModule({
      declarations: [
          LoginComponent,
          AuthComponent
      ],
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  export class SuperAdminRoutingModule { }
  </code></pre>
  <p>super-admin.component.html</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-shared&gt;&lt;/app-shared&gt;
  </code></pre>
  <p>and finaly is shared.component.ts file</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-shared',
    templateUrl: './shared.component.html',
    styleUrls: ['./shared.component.scss']
  })
  export class SharedComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  <p>Please look at <code>super-admin.module.ts</code> file, i imported and declared ShareComponent in <code>super-admin.module.ts</code> but i can't use it in <code>super-admin.component.html</code>, it's say:</p>
  <blockquote>
  <p>'app-shared' is not a known element:</p>
  <ol>
  <li>If 'app-shared' is an Angular component, then verify that it is part of this module.</li>
  <li>If 'app-shared' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</li>
  </ol>
  </blockquote>
  <p>I think i miss something right?</p>
  <p>I <code>ng s</code> it for 7 times but it still not work</p>