Custom Library组件不是一个已知元素，但是应用会编译并运行

Question

问题

我的html文件警告我的自定义组件/管道“不是已知元素”。但是，构建并运行应用程序按预期工作，并且自定义组件/管道可以正常运行。正常工作但显示为错误的组件二分法令人讨厌，并且可能很难使用。我知道这是一件小事，但我真的很想当没有错误时，也不会在我的html文件中看到错误。

摘要

我有两个不同的角度项目；我在我的角度应用程序中使用的角度库。该库导出应用程序使用的几个自定义组件，管道和服务。我没有通过npm发布此库，而是使用npm-link来使应用程序访问该库。这似乎可以正常工作，因为我的应用程序组件中定义的任何服务/组件都可以正常工作，并且不会抱怨。尽管从库中将任何内容放入模板文件的那一刻起，该选择器就会带有下划线并显示警告。

文件

/*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>

上面的文件将包含引用我的自定义组件的所有行，并用红色加下划线并显示错误消息'my-theme-toggle'不是一个已知元素：...如果是，请验证它是否属于模块。

尝试修复

我已经尝试过一件事，但无济于事

• 不使用NPM链接，而只是将ng-packagr创建的库复制到我的应用程序的节点模块中
• 重建和重新链接/重新启动所有内容
• 搜索其他S.O问题：大多数问题与构建失败有关，因为导入/导出实际上不正确。

我的预感

我认为这是使用应用程序中tsconfig.json中paths编译器选项的问题。在我所有的研究中，这件事比其他任何事情都弹出。我目前没有设置路径，因为一切正常。我的公共库的外观和行为与任何其他node_module库一样，除了此问题。

我的另一种想法是，因为一切正常且可以运行，所以问题可能出在vs代码不了解导入或类似性质的问题上。尽管我认为这不太可能。

背景

两个角度项目都在版本9，rc7上。我使用ng-packagr构建我的库。我使用Visual Studio代码，在撰写本文时，我使用的是最新版本。

Answer 1

我将项目从Angular 8切换到9，并且在VS Code中遇到了相同的问题。适用于我的解决方案：

• 使用配置生产生成库：ng build my-lib --prod =>这将迫使编译器使用较旧的View Engine而不是Ivy（Angular docs libraries）
• 转到文件夹“ ./dist/my-lib/”并使用npm pack而不是npm link =>，这将创建一个tgz文件，您可以将其安装在使用的应用程序中。
• 在使用的应用中安装库：npm install "D:/mypath/dist/my-lib/my-lib-2.1.0.tgz"

这在我的环境中解决了Angular 9的VS Code问题。