title: Template parse errors: is not a known element
body: <p>I have a midi component defined as:</p>
  
  <pre><code>@Component({
    selector: 'midi-midi-lib',
    templateUrl: './midi-lib.component.html'
  })
  
  export class MidiLibComponent implements OnInit {
  }
  </code></pre>
  
  <p>I also have a home component defined as:</p>
  
  <pre><code>@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  }
  </code></pre>
  
  <p>whose template contains the markup:</p>
  
  <pre><code>&lt;midi-midi-lib&gt;&lt;/midi-midi-lib&gt;
  </code></pre>
  
  <p>The <code>midilib</code> component is included in its own module:</p>
  
  <pre><code>@NgModule({
    declarations: [
      MidiLibComponent,
    ],
    imports: [
    ],
    exports: [
      MidiLibComponent,
    ]
  })
  export class MidiLibModule { }
  </code></pre>
  
  <p>with the application module containing it:</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      MidiLibModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Note that the above code is trimmed from many other components and modules.</p>
  
  <p>The source tree is like:</p>
  
  <pre><code>src
  ├── app
  ├── lib
  </code></pre>
  
  <p>with the <code>Midi</code> component being under the <code>lib</code> directory.</p>
  
  <p>If I then call the route defined as:</p>
  
  <pre><code>{
    path: 'home',
    loadChildren: './views/home/home.module#HomeModule',
    data: {
      preload: true,
      delay: false
    }
  },
  </code></pre>
  
  <p>with the <a href="https://dev.thalasoft.com:4200/home" rel="nofollow noreferrer">https://dev.thalasoft.com:4200/home</a> url then the page shows the error:</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Template parse errors:\n'midi-midi-lib' is not a known element
  </code></pre>
  
  <p>If I type in a terminal the <code>ng build --prod</code> command then I get the same error:</p>
  
  <pre><code>ERROR in : 'midi-midi-lib' is not a known element:
  1. If 'midi-midi-lib' is an Angular component, then verify that it is part of this module.
  2. If 'midi-midi-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    &lt;mat-card-content&gt;
      &lt;p&gt;
        [ERROR -&gt;]&lt;midi-midi-lib&gt;&lt;/midi-midi-lib&gt;
      &lt;/p&gt;
    &lt;/mat-card-content&gt;
  ")
  </code></pre>
  
  <p>Whereas if I call the route defined as:</p>
  
  <pre><code>{
    path: 'midi',
    component: MidiLibComponent
  },
  </code></pre>
  
  <p>in the <code>app-routing.module</code> file with the <code>https://dev.thalasoft.com:4200/midi</code> url then the component is found and its content is displayed just fine.</p>
  
  <p>I'm under <code>Angular 8.1.3</code></p>