angular - 让 Angular Material 在 Angular 库中工作

Question

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

这些是我采取的步骤:

创建项目

ng new test-project

添加 Angular Material

ng add @angular/material

创建库

ng g library test-lib

在 test-lib package.json 文件

中添加对 Angular Material 的引用到对等依赖项

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

在 test-lib-component 中添加 Angular Material CheckBox

的 html

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

建库

ng build test-lib --watch

在应用程序 app.module 中添加对来自 test-lib

的组件的引用

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

在库项目中，在 test-lib.module 中，我添加了对 Angular Material CheckBox Module

的引用

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 { }

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

添加库的 html。

<test-lib></test-lib>

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

'mat-checkbox' 不是已知元素:
1. 如果 'mat-checkbox' 是一个 Angular 组件，那么验证它是这个模块的一部分。

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

谢谢

Answer 1

本地编码后更新答案:

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

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. test-lib.module

无需更改

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



5. 截图