title: Custom Library component is not a known element, but app compiles and runs
body: <blockquote>
  <p><strong>The Problem</strong></p>
  </blockquote>
  <p>My html files warn that my custom components/pipes 'are not a known element'. However building and running the application <strong>works as intended</strong>, and the custom components/pipes are functional. The dichotomy of the components working but showing as errors is annoying and can be difficult to work with. I know this is a small thing, but I really want to not see errors in my html files when there are no errors.</p>
  <blockquote>
  <p><strong>Summary</strong></p>
  </blockquote>
  <p>I have two distinct angular projects; an angular library which I consume with my angular application. The library exports several custom components, pipes and services which the application uses. I do not have this library published via npm, instead I use npm-link to give the application access to the library. This seems to work as any service/component defined in my applications components work and doesn't complain. Though the moment I put anything in my template file from my library, that selector is underlined and a warning appears.</p>
  <blockquote>
  <p><strong>The files</strong></p>
  </blockquote>
  <pre><code>/*Library Module*/
  @NgModule({
    declarations: [
      ThemeToggleComponent,
      // Other custom components/pipes
    ],
    exports: [
      ThemeToggleComponent,
      // Other components needed in templates files
    ]
  })
  export class MyCommonModule {}
    
  </code></pre>
  <pre><code>/*
   * Public API Surface of my-common library
   */
  
  export * from './lib/my-common.module';
  /*
   * Many other components, services, pipes, etc etc
   */
  export * from './lib/theme-toggle/theme-toggle.component';
  
  </code></pre>
  <pre><code>/* Consuming Application module */
  import { MyCommonModule } from 'my-common';
  
  @NgModule({
    imports: [
      MyCommonModule,
    ],
    declarations: [
      MyComponent,
    ],
  })
  export class MyModule {}
  </code></pre>
  <pre><code>/* Template of MyComponent, my.component.html */
  &lt;div&gt;
    &lt;my-theme-toggle (darkThemeSelected)=&quot;toggleTheme($event)&quot;&gt;&lt;/my-theme-toggle&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The file above will have all lines which reference my custom components underlined in red with the error message <strong>'my-theme-toggle' is not a known element: ...if it is, verify it is apart of the module</strong>.</p>
  <blockquote>
  <p><strong>Attempts to fix</strong></p>
  </blockquote>
  <p>I've tried a things, but to no avail</p>
  <ul>
  <li>Not using NPM link and just copying the library created by ng-packagr into the node modules of my application</li>
  <li>Rebuilding and relinking/restarting everything</li>
  <li>Searching for other S.O questions: most questions are about build failures because the import/export was actually incorrect.</li>
  </ul>
  <blockquote>
  <p><strong>My hunches</strong></p>
  </blockquote>
  <p>I think this is an issue with the <em>paths</em> compiler option in tsconfig.json in the consuming application. Throughout all of my research this is the one thing that pops up more than anything else. I currently do not have a path set, because everything is working. My common library looks and acts like any other node_module library, other than this issue.</p>
  <p>My other thought is that because everything works and runs, then the issue may be with vs-code not understanding the import, or something of that nature. Though I think this is unlikely.</p>
  <blockquote>
  <p><strong>The background</strong></p>
  </blockquote>
  <p>Both angular projects are on version 9, rc7. I use ng-packagr to build my library. I use visual studio code, and at the time of writing I am on the latest release.</p>
  <p><strong>EDIT</strong>
  This problem went away upon upgrading to angular 11, I think several of the other issues might solve it, but this feels like the best option.</p>