각 재료를 차례로 사용하는 몇 가지 구성 요소로 각도 라이브러리를 만들고 있습니다. 를 사용하여 각도 프로젝트에 각도 재료를 추가했습니다 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,
ContactInfoComponent,
FeatureSettingsComponent,
IntegrationSettingsComponent,
AccountSettingsComponent
]
})
export class WebpayComponentsModule { }
감사합니다!
그래서 내가 멍청하다는 것이 밝혀졌습니다! declarations
대신에 Angular 재질 모듈을 추가했습니다 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 { }
바라건대 이것은 비슷한 실수를하는 모든 사람에게 도움이 될 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다