The Problem
My html files warn that my custom components/pipes 'are not a known element'. However building and running the application works as intended, 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.
Summary
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.
The files
/*Library Module*/
@NgModule({
declarations: [
ThemeToggleComponent,
// Other custom components/pipes
],
exports: [
ThemeToggleComponent,
// Other components needed in templates files
]
})
export class MyCommonModule {}
/*
* 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';
/* Consuming Application module */
import { MyCommonModule } from 'my-common';
@NgModule({
imports: [
MyCommonModule,
],
declarations: [
MyComponent,
],
})
export class MyModule {}
/* Template of MyComponent, my.component.html */
<div>
<my-theme-toggle (darkThemeSelected)="toggleTheme($event)"></my-theme-toggle>
</div>
The file above will have all lines which reference my custom components underlined in red with the error message 'my-theme-toggle' is not a known element: ...if it is, verify it is apart of the module.
Attempts to fix
I've tried a things, but to no avail
- Not using NPM link and just copying the library created by ng-packagr into the node modules of my application
- Rebuilding and relinking/restarting everything
- Searching for other S.O questions: most questions are about build failures because the import/export was actually incorrect.
My hunches
I think this is an issue with the paths 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.
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.
The background
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.