角度库中的组件选择器不是已知元素

Question

我已经完全按照这些步骤创建了简单的角度库：

1. ng new pwo-countup-library --create-application=false
2. ng g library countup
3. ng g application countup-test
4. ng build countup

5.将CountupModule导入app.module.ts

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

import { AppComponent } from './app.component';
import { CountupModule } from 'countup';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule, CountupModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

6. 将库组件选择器添加到 app.component 模板中

@Component({
selector: 'app-root',
template: `
  <lib-countup></lib-countup>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'countup-test';
}

countup.component 看起来像这样：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'lib-countup',
  template: `
    <p>
      countup works!
    </p>
  `,
  styles: []
})
export class CountupComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

这里是 countup.module：

import { NgModule } from '@angular/core';
import { CountupComponent } from './countup.component';



@NgModule({
  declarations: [CountupComponent],
  imports: [
  ],
  exports: [CountupComponent]
})
export class CountupModule { }

我在 app.component 模板中遇到错误：

lib-countup 不是已知元素

有人可以帮我吗？ 这与这个问题https://stackoverflow.com/questions/62315080/selector-is-not-a-known-element-angular-9-custom-library[1] 中的问题完全相同，但到目前为止没有人知道这个问题的答案。谢谢！

Answer 1

您正在尝试将组件与不存在的选择器“lib-countup”一起使用。您必须在库中使用此类选择器创建组件并将其添加到库模块的导出数组中

@NgModule({
  declarations: [YourComponent], 
  exports: [YourComponent] <--- here
  imports: [],
  providers: []
  })
export class CountupModule{ }