让 Angular Material 在 Angular 库中工作

我正在尝试让 Angular 材质在 Angular 库中工作。

这些是我已采取的步骤：

1. 创建项目

ng new test-project

2. 添加角度材质

ng add @angular/material

3. 创建库

ng g library test-lib

4. 将对角度材料的引用添加到 test-lib package.json 文件中的对等依赖项

  "peerDependencies": {
    "@angular/common": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/material": "^7.3.7"
  }

5. 在 test-lib-component 中添加 Angular Material CheckBox 的 html

@Component({
  selector: 'test-lib',
  template: `
    <p>
      test!
    </p>
    <mat-checkbox>my checkbox</mat-checkbox>
  `,
  styles: []
})

6. 建库

ng build test-lib --watch

7. 在应用程序 app.module 中添加对 test-lib 中组件的引用

import { TestLibComponent } from 'test-lib'
@NgModule({
  declarations: [
    AppComponent,
    TestLibComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8. 在库项目中的 test-lib.module 中，我添加了对 Angular Material CheckBox 模块的引用

import { NgModule } from '@angular/core';
import { ControlLibraryComponent } from './control-library.component';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [TestLibComponent],
  imports: [
    MatCheckboxModule
  ],
  exports: [TestLibComponent]
})
export class TestLibModule { }

9. 最后，在主应用程序 app.component.html 文件中，我使用正确的选择器添加了库的 html

<test-lib></test-lib>

我现在运行该应用程序，收到以下错误：

“mat-checkbox”不是已知元素： 1. 如果“mat-checkbox”是 Angular 组件，则验证它是否是该模块的一部分。

这显然是缺少引用时的标准消息，但当我添加它们时，我想知道我还需要在库中做什么才能使其正常工作？

Thanks

本地编码后更新答案：

我尝试了您在问题中提到的所有步骤，并且可以运行该应用程序而不会出现任何错误。但是，我需要更新您的一些代码，如下所示：

1. 应用程序模块

import { TestLibModule } from 'test-lib';    // <-- this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TestLibModule    // <-- this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.确认选择器名称

<lib-test-lib></lib-test-lib>

3. 测试库.module

无需更改

4. 截图<mat-checkbox>my checkbox</mat-checkbox>

5. 截图