title: if x is an Angular component then verify its part of this module
body: <p>I have created an Angular application. I have put the selector of the navigation component in the app.component.html which is part of the app.module and getting the following error.</p>
  <pre><code>ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-nav' is not a known element:
  1. If 'app-nav' is an Angular component, then verify that it is part of this module.
  </code></pre>
  <p>The app-nav is the selector of navcomponent which belongs to the sharedmodule. The sharedmodule is imported to the app.module.</p>
  <p>So why isnt the app-nav not being recognized ?</p>
  <p><strong>NavComponent</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.scss']
  })
  export class NavComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p><strong>Shared module</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { NavComponent } from './nav/nav.component';
  
  
  
  @NgModule({
    declarations: [NavComponent],
    imports: [
      CommonModule
    ]
  })
  export class SharedModule { }
  </code></pre>
  <p><strong>App module</strong></p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { SharedModule } from './shared/shared.module';
  import { AppComponent } from './app.component';
  
  import { HttpClientModule } from '@angular/common/http';
  import { OrderModule } from './modules/order/order.module';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      OrderModule,
      SharedModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;app-nav&gt; &lt;/app-nav&gt;
  </code></pre>