如何在建立角形库时捆绑独立组件和指令
原标题：How to bundle standalone component and directive when building an Angular library
I have built an Angular library that contains a component and a directive which are intrinsically linked. That is the component uses the directive. Everything works fine other than to successfully use the library I have to import both to component and the directive where what I would like to do is import a single element which behind the scenes imports both the component and the directive.
I have found a lot of examples using NgModules but my component and directive are standalone. My public-api.ts file looks like this...
export * from ./lib/types ;
export * from ./lib/ngx-caboodal.qrcode.module ;
export * from ./lib/ngx-caboodal-qrcode.directive ;
export * from ./lib/ngx-caboodal-qrcode.component ;
I changed it to this..
import {NgxCaboodalQRCodeComponent} from "./lib/ngx-caboodal-qrcode.component";
import {NgxCaboodalQRCodeDirective} from "./lib/ngx-caboodal-qrcode.directive";
export * from ./lib/types ;
export const NgxCaboodalQRCode = [
NgxCaboodalQRCodeComponent,
NgxCaboodalQRCodeDirective
] as const;
And this all worked perfectly within my shared project setup but once it was packaged and installed in my real application it fails to build with the following error: -
X [ERROR] TS-993004: Unable to import component NgxCaboodalQRCodeComponent.
The symbol is not exported from C:/TheCodeClinic/fssi-apps/src/Fssi.Web.Identity/ClientApp/node_modules/ngx-caboodal-qrcode/index.d.ts (module ngx-caboodal-qrcode ). [plugin angular-compiler]
src/app/mfa-prompt/mfa-prompt.component.ts:29:13:
29 │ export class MfaPromptComponent extends FormPageComponent implemen...
╵ ~~~~~~~~~~~~~~~~~~
The component is declared here.
node_modules/ngx-caboodal-qrcode/lib/ngx-caboodal-qrcode.component.d.ts:3:0:
3 │ export declare class NgxCaboodalQRCodeComponent {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
After the answer below, just to confirm I changed my public-api.ts to the following: -
import {NgxCaboodalQRCodeComponent} from "./lib/ngx-caboodal-qrcode.component";
import {NgxCaboodalQRCodeDirective} from "./lib/ngx-caboodal-qrcode.directive";
export * from ./lib/types ;
export { NgxCaboodalQRCodeComponent} from "./lib/ngx-caboodal-qrcode.component";
export { NgxCaboodalQRCodeDirective} from "./lib/ngx-caboodal-qrcode.directive";
export const NgxCaboodalQRCode = [
NgxCaboodalQRCodeComponent,
NgxCaboodalQRCodeDirective
] as const;
最佳回答
Try exporting the two using the below syntax.
export * from ./lib/types ;
export { NgxCaboodalQRCodeComponent} from "./lib/ngx-caboodal-qrcode.component";
export { NgxCaboodalQRCodeDirective} from "./lib/ngx-caboodal-qrcode.directive";
问题回答
暂无回答
