Html 自定义库组件不是已知元素，但应用程序编译并运行

问题

我的html文件警告我的自定义组件/管道“不是已知元素”。但是，构建和运行应用程序可以按预期的方式运行，并且自定义组件/管道可以正常工作。工作但显示为错误的组件的二分法很烦人，很难处理。我知道这是一件小事，但我真的不想在没有错误的情况下看到html文件中的错误

摘要

我有两个不同的角度项目；我使用angular应用程序的angular库。该库导出应用程序使用的多个自定义组件、管道和服务。我没有通过npm发布这个库，而是使用npm链接让应用程序访问该库。这似乎与“我的应用程序组件”中定义的任何服务/组件一样工作，并且不会抱怨。尽管在我从我的库将任何内容放入模板文件的那一刻，该选择器被加下划线并出现警告

文件

MyComponent的模板my.component.html*/ 上面的文件将包含引用自定义组件的所有行，这些行以红色下划线显示错误消息。“my-theme-toggle”不是已知元素：…如果是，请验证它是模块的一部分。

尝试修复

我试过很多东西，但都没用

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

我的直觉

我认为这是消费应用程序中tsconfig.json中路径编译器选项的问题。在我所有的研究中，这是一个比其他任何东西都突出的东西。我目前没有设置路径，因为一切正常。除此问题外，我的公共库的外观和行为与任何其他node_模块库类似

我的另一个想法是，因为所有的东西都工作和运行，那么问题可能是vs代码不理解导入，或者类似的东西。虽然我认为这不太可能

背景

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

编辑

---

升级到angular 11后，这个问题消失了，我认为其他几个问题可能会解决它，但这感觉是最好的选择。

我将我的项目从angular 8切换到了angular 9，在VS代码中也遇到了同样的问题。我的解决方案对我有效：

• 使用配置产品构建库：

  ng Build my lib--prod

  =>这将强制编译器使用较旧的视图引擎，而不是Ivy（）
• 转到文件夹“/dist/my lib/”并使用

  npm-pack

  而不是

  npm-link

  =>这将创建一个tgz文件，您可以在消费应用程序中安装该文件
• 在您的消费应用程序中安装库：

  npm安装“D:/mypath/dist/my lib/my-lib-2.1.0.tgz”

---

这在我的环境中解决了Angular 9与代码之间的问题。

直到最近，我才遇到过这样的错误

---

卸载Angular语言服务扩展（我最近安装的）后，错误消失了。

我也有同样的问题。这里有一个修正

添加

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

及

到你的模块

---

完整的

app.module.ts

供您参考

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgNiceSelectModule } from 'ng-nice-select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgNiceSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule { }

---

要解决此问题，您当前必须使用生产标志

--prod

进行生成，因为在其当前状态下，生成。默认情况下，angular prod build不使用常春藤构建。因此，在构建它时，它会创建一个

lib.metadata.json

文件。这是语言服务器用来使插件工作的文件

在库中创建一个build

ng build--prod

• 添加

  --watch

  标志以监视更改

在您的库中创建一个链接

cd dist

，然后

npm链接

• 我在

  dist

  文件夹中创建了一个

  package.json

  ，并在那里创建了链接，因为我的库中有多个模块。这将允许您这样做

  • 从'/moduleA'导入{moduleComponent}

  • 从'/moduleA'导入{moduleReadRective}

• 注意：您链接的文件夹必须有一个

  package.json

  ，否则它将使用项目的根目录，因为它是最接近的

  package.json

• 如果执行相同操作，则以下路径的格式正确，否则可能不正确，您可以尝试：

  “lib”：[“/node\u modules/lib”、“/node\u modules/lib/*”]

在您的应用程序中，链接到程序包

npm链接

在应用程序中在

tsconfig.base.json中创建一个
路径
（路径可能会有所不同，具体取决于您创建链接的方式）

在应用程序中重新启动Angular语言服务器

---

您可以尝试以下方法。 简言之：

• 使用--prod标志构建lib
• 然后转到

  dist/YourLibName

  并运行

  npm链接

• 转到将使用lib的项目，并从lib package.json运行

  npm link YourLibName

  name
• 在项目tsconfig.json中，向编译器选项添加路径属性

这样，您就可以像使用任何库（如材料）一样使用它。

这是一个导入专业版

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

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgNiceSelectModule } from 'ng-nice-select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgNiceSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule { }

{
  "compilerOptions": {
    "paths": {
      "lib/*": [
        "./node_modules/lib/*"
      ]
    }
  }
}

    {  
      "compilerOptions": {
       .
       .
       .
        "paths": {
          "YourLibName from lib package.json": ["node_modules/YourLibPath"]
        },

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "preserveSymlinks": true,
    ...