Home How to bundle standalone component and directive when building an Angular library

Questions

How to bundle standalone component and directive when building an Angular library

July 25, 2024

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 {
        ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

>Solution :

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";