title: '<tag-name> is not a known element' error when this tag appears in a component provided by router
body: <p>I encountered some weird behavior while trying to build my straightforward Angular application.</p>
  <p><strong>app.module.ts</strong></p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>app.component.html</strong> (the <code>AppComponent</code>'s template)</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p><strong>app-routing.module.ts</strong></p>
  <pre><code>const routes: Routes = [
    { path: '', component: IndexComponent } // IndexComponent is part of MainModule
  ];
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p><strong>main.module.ts</strong></p>
  <pre><code>@NgModule({
    declarations: [
      IndexComponent
    ],
    imports: [
      CommonModule,
      StuffModule // its stuff will be used inside the IndexComponent'template
    ]
  })
  export class MainModule { }
  </code></pre>
  <p><strong>index.component.html</strong> (the IndexComponent's template)</p>
  <pre><code>&lt;app-fancy-input&gt;&lt;/app-fancy-input&gt;
  </code></pre>
  <p><strong>stuff.module.ts</strong></p>
  <pre><code>@NgModule({
    declarations: [
      FancyInputComponent
    ],
    imports: [
      CommonModule
    ],
    exports: [
      FancyInputComponent // its tag is app-fancy-input
    ]
  })
  export class StuffModule { }
  </code></pre>
  <p>At this point if <code>ng serve</code> be put in command prompt, the following error would crop up:</p>
  <blockquote>
  <p>Error: src/app/index/index.component.html:1:1 - error NG8001:
  'app-fancy-input' is not a known element</p>
  </blockquote>
  <p>However, it can be fixed with this line in <strong>app.module.ts</strong>:</p>
  <pre><code>import { MainModule } from './main/main.module';
  </code></pre>
  <p>(even with no adding this module in the <code>AppModule</code>'s <code>imports</code>)</p>
  <p>Is this behavior by design? I formerly tended to think that if a module's component uses <code>&lt;router-outlet&gt;</code> it shouldn't be aware of other modules whose components matched up against router pathes (<code>MainModule</code>) or used by these components (<code>StuffModule</code>). Moreover, in this case a compiler doesn't require placing the module inside <code>imports</code> it just forces to import <code>MainModule</code> in terms of JavaScript.</p>
  <p>Angular CLI: 13.1.4 Angular: 13.1.3</p>