html - 无法使用在我自己的库中声明的元素之一

Question

我正在尝试创建一个可以使用其中的组件的库，但是 angular 说我使用的元素未被识别为元素。我正在尝试导出 VitalSignLinesListComponent。

我遵循的步骤是：

1. 在库模块中声明组件
2. 导出库模块中的组件
3. 在公共 API 中导出组件
4. 从库中导入模块
5. 将元素放在 html 文件中
6. 接收错误

我得到的错误：

src/app/app.component.html:2:1 中的错误 - 错误 NG8001：“lib-vital-sign-lines-list”不是已知元素：1. 如果“lib-vital-sign-lines-list”是一个 Angular 组件，然后验证它是这个模块的一部分。2. 如果“lib-vital-sign-lines-list”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

零件：

@Component({
  selector: 'lib-vital-sign-lines-list',
  templateUrl: './vital-sign-lines-list.component.html',
  styleUrls: ['./vital-sign-lines-list.component.css']
})

export class VitalSignLinesListComponent implements OnInit {

  @Input()
  idEdDossier: string;
}

图书馆模块：

import { NgModule } from '@angular/core';
import { VitalsignsComponent } from './vitalsigns.component';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { ModalInputComponent } from './modal-input/modal-input.component';
import { VitalSignLinesListComponent } from './vital-sign-lines-list/vital-sign-lines-list.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
import { EcareLibModule } from 'ecarelib'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ComboBoxComponent } from './combo-box/combo-box.component';
import { ComboBoxPipe } from './combo-box/combo-box.pipe';
import { LogService } from './services/log.service';
import { ClickOutsideDirective } from './vital-sign-lines-list/click-outside.directive';

const appRoutes: Routes = [
  { path: 'modal', component: ModalInputComponent },
  { path: 'vitalSignLinesList', component: VitalSignLinesListComponent }
];

// @dynamic
@NgModule({
  declarations: [
    VitalsignsComponent,
    ModalInputComponent,
    VitalSignLinesListComponent,
    ComboBoxComponent,
    ComboBoxPipe,
    ClickOutsideDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    EcareLibModule.forRoot(),
    NgSelectModule,
    RouterModule.forRoot(appRoutes, { enableTracing: false }),
    FormsModule,
    NgbModule
  ],
  providers: [LogService],
  exports: [VitalsignsComponent, VitalSignLinesListComponent]
})
export class VitalsignsModule {

}

公共API：

export * from './lib/vitalsigns.service';
export * from './lib/vitalsigns.component';
export * from './lib/vitalsigns.module';
export * from './lib/vital-sign-lines-list/vital-sign-lines-list.component';

导入库：（生命体征模块）

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

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { EcareLibModule } from 'ecarelib';
import { VitalsignsModule } from 'vitalsigns';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EcareLibModule.forRoot(),
    HttpClientModule,
    RouterModule.forRoot([]),
    VitalsignsModule,
    NgbModule,
    NgSelectModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML：

<lib-vital-sign-lines-list [idEdDossier]=idDossier></lib-vital-sign-lines-list>

标签： htmlangularnpmangular-library