title: Angular Components not known inside router outlet
body: <h1>Context</h1>
  <p>I created an angular app with this configuration:</p>
  <pre><code>? What name would you like to use for the new workspace and initial project? test-route
  ? Would you like to add Angular routing? Yes
  ? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
  </code></pre>
  <p>I created two component, that are realy simple</p>
  <pre class="lang-js prettyprint-override"><code>    import { Component } from '@angular/core';
      
      @Component({
          selector: 'app-first',
          templateUrl: './first.component.html',
      })
      export class FirstComponent { }
  </code></pre>
  <p>Inside the html there is juste a simple text</p>
  <pre><code>First Component
  </code></pre>
  <p>The seconde component is basicly the same but i replaced First by Second.</p>
  <p>I created a route for my first component.</p>
  <pre class="lang-js prettyprint-override"><code>    const routes: Routes = [
        { path: 'first-component', component: FirstComponent },
      ];
  </code></pre>
  <h1>What i want to do</h1>
  <p>Then i want to add my second component inside the html of first one</p>
  <pre class="lang-html prettyprint-override"><code>    First Component
      &lt;app-second&gt;&lt;/app-second&gt;
  </code></pre>
  <p>And i also add my second component inside my <code>app.module.ts</code></p>
  <pre class="lang-js prettyprint-override"><code>    @NgModule({
        declarations: [
          AppComponent,
          SecondeComponent
        ],
        imports: [
          BrowserModule,
          AppRoutingModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  </code></pre>
  <h1>Problem</h1>
  <p>When i do that i have an error</p>
  <blockquote>
  <p>error NG8001: 'app-second' is not a known element:</p>
  <ol>
  <li>If 'app-second' is an Angular component, then verify that it is part of this module.</li>
  <li>If 'app-second' 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 also tried to add the second component directly inside my <code>app.component.html</code> and there no errors.
  How can i use my custom components from my routes ?</p>
  <p>Here is a exemple on <a href="https://stackblitz.com/edit/angular-ivy-4awsrq?file=src/app/Components/FirstComponent/first.component.html" rel="nofollow noreferrer">stackblitz</a></p>