尝试使用角度材质编译角度库时无法声明“ MatRadioModule”

问题描述

我正在创建一个包含一些组件的角度库，这些组件又使用了角度材料。我已经使用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.

以此类推...

如果我理解正确，则角形材料不属于库编辑的一部分。因此，我的问题是如何添加它，以便使用该库编译角形材料。

包含该库的项目的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 && npm pack","deploy": "npm run build && 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,AccountSettingsComponent
  ]
})
export class WebpayComponentsModule { }

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-library angular-material