让 Angular Material 在 angular 图书馆工作

Question

我正在尝试让 Angular Material 在 Angular 图书馆中工作。

这些是我采取的步骤：

1. 创建项目

ng new test-project

2. 添加Angular Material

ng add @angular/material

3. 创建库

ng g library test-lib

4. 将对 angular material 的引用添加到 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 添加来自测试库的组件引用

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 组件，则验证它是该模块的一部分。

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

谢谢

Answer 1

本地编码后更新答案：

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

1。 app.module

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。测试-lib.module

无需更改

4。 <mat-checkbox>my checkbox</mat-checkbox>

的屏幕截图

5。截图