Получение Angular Material для работы в угловой библиотеке

Question

Я пытаюсь заставить Angular Material работать в Angular Library.

Я предпринял следующие шаги:

1. Создание проекта

ng new test-project

Добавить угловой материал

ng add @angular/material

Создать библиотеку

ng g library test-lib

Добавить ссылку на угловой материал для одноранговых зависимостей в файле test-lib package.json

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

В рамках test-lib-component добавьте html для углового материала CheckBox

@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, я добавляю ссылки на модуль углового контроля материалов

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 apps я добавляю html для библиотеки, используя правильный селектор

<test-lib></test-lib>

IТеперь запустите приложение, и я получаю следующую ошибку:

'mat-checkbox' не является известным элементом: 1. Если 'mat-checkbox' является угловым компонентом, то убедитесь, что он является частью этого модуля. .

Это, очевидно, стандартное сообщение, когда ссылка отсутствует, но когда я их добавил, мне интересно, что еще мне нужно сделать в библиотеке, чтобы заставить это работать?

Спасибо

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

Изменений не требуется

4. Снимок экрана: <mat-checkbox>my checkbox</mat-checkbox>

5. Снимок экрана