Блог

Я создаю библиотеку angular с несколькими компонентами, которые, в свою очередь, используют angular material. Я добавил angular material в проект angular с помощью ng add @angular/material . Я также попытался добавить его в библиотеку с помощью ng add @angular/material --project webpay-components . Добавление его в проект библиотеки, похоже, ничего не дало.

Когда я запускаю ng build webpay-components , я получаю следующий вывод:

 Building Angular Package
******************************************************************************
It is not recommended to publish Ivy libraries to NPM repositories.
Read more here: https://v9.angular.io/guide/ivy#maintaining-library-compatibility
******************************************************************************

------------------------------------------------------------------------------
Building entry point 'webpay-components'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: src/lib/webpay-components.module.ts:33:5 - error NG6001: Cannot declare 'MatRadioModule' in an NgModule as it's not a part of the current compilation.

33     MatRadioModule,
       ~~~~~~~~~~~~~~

  ../../node_modules/@angular/material/radio/radio-module.d.ts:11:22
    11 export declare class MatRadioModule {
                        ~~~~~~~~~~~~~~
    'MatRadioModule' is declared here.
src/lib/webpay-components.module.ts:34:5 - error NG6001: Cannot declare 'MatCheckboxModule' in an NgModule as it's not a part of the current compilation.

34     MatCheckboxModule,
       ~~~~~~~~~~~~~~~~~

  ../../node_modules/@angular/material/checkbox/checkbox-module.d.ts:18:22
    18 export declare class MatCheckboxModule {
                        ~~~~~~~~~~~~~~~~~
    'MatCheckboxModule' is declared here.
src/lib/webpay-components.module.ts:35:5 - error NG6001: Cannot declare 'MatIconModule' in an NgModule as it's not a part of the current compilation.

35     MatIconModule,
       ~~~~~~~~~~~~~

  ../../node_modules/@angular/material/icon/icon-module.d.ts:11:22
    11 export declare class MatIconModule {
                        ~~~~~~~~~~~~~
    'MatIconModule' is declared here.
  

и так далее…

Если я правильно понимаю, angular material не является частью компиляции библиотеки. Итак, мой вопрос в том, как бы я добавил его, чтобы материал angular был скомпилирован с библиотекой.

package.json для проекта, содержащего библиотеку, выглядит следующим образом:

 {
  "name": "webpay-lib",
  "version": "0.0.0",
  "scripts": {
    "build-components": "ng build webpay-components"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/cdk": "^10.2.2",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/material": "^10.2.2",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.3",
    "@angular/cli": "~10.1.1",
    "@angular/compiler-cli": "~10.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^10.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
  

package.json для проекта библиотеки выглядит следующим образом:

 {
  "name": "webpay-components",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^10.1.3",
    "@angular/core": "^10.1.3",
    "@angular/material": "^10.2.2"
  },
  "dependencies": {
    "tslib": "^2.0.0",
    "webpay-provisioning": "file:../../dist/webpay-provisioning/webpay-provisioning-0.0.1.tgz"
  },
  "scripts": {
    "build": "ng build webpay-components",
    "pack": "cd ../../dist/webpay-components amp;amp; npm pack",
    "deploy": "npm run build amp;amp; npm run pack"
  }
}
  

И, наконец, webpay-components.module.ts выглядит следующим образом:

 import { NgModule } from '@angular/core';
import { FormInputComponent } from './form-input/form-input.component';
import { AccountSettingsComponent } from './provision-settings/account-settings/account-settings.component';
import { CompanyInfoComponent } from './provision-settings/company-info/company-info.component';
import { ContactInfoComponent } from './provision-settings/contact-info/contact-info.component';
import { FeatureSettingsComponent } from './provision-settings/feature-settings/feature-settings.component';
import { IntegrationSettingsComponent } from './provision-settings/integration-settings/integration-settings.component';

import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  declarations: [
    FormInputComponent,
    CompanyInfoComponent,
    ContactInfoComponent,
    FeatureSettingsComponent,
    IntegrationSettingsComponent,
    AccountSettingsComponent,
    MatInputModule,
    MatRadioModule,
    MatCheckboxModule,
    MatIconModule,
    MatSelectModule,
    MatButtonModule
  ],
  imports: [
  ],
  exports: [
    CompanyInfoComponent,
    ContactInfoComponent,
    FeatureSettingsComponent,
    IntegrationSettingsComponent,
    AccountSettingsComponent
  ]
})
export class WebpayComponentsModule { }
  

Спасибо!

Так что, оказывается, я просто глуп! Я добавил модули Angular material в declarations вместо imports . Модуль должен выглядеть следующим образом:

 import { NgModule } from '@angular/core';
import { FormInputComponent } from './form-input/form-input.component';
import { AccountSettingsComponent } from './provision-settings/account-settings/account-settings.component';
import { CompanyInfoComponent } from './provision-settings/company-info/company-info.component';
import { ContactInfoComponent } from './provision-settings/contact-info/contact-info.component';
import { FeatureSettingsComponent } from './provision-settings/feature-settings/feature-settings.component';
import { IntegrationSettingsComponent } from './provision-settings/integration-settings/integration-settings.component';

import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  declarations: [
    FormInputComponent,
    CompanyInfoComponent,
    ContactInfoComponent,
    FeatureSettingsComponent,
    IntegrationSettingsComponent,
    AccountSettingsComponent
  ],
  imports: [
    MatInputModule,
    MatRadioModule,
    MatCheckboxModule,
    MatIconModule,
    MatSelectModule,
    MatButtonModule
  ],
  exports: [
    CompanyInfoComponent,
    ContactInfoComponent,
    FeatureSettingsComponent,
    IntegrationSettingsComponent,
    AccountSettingsComponent
  ]
})
export class WebpayComponentsModule { }
  

Надеюсь, это может помочь любому, кто допустит подобную ошибку.