3

I'm trying to make an angular library with secondary entry point for every module.

I have three modules: A, B and C. A is standalone, but B depends on C, meaning I have import to get C.module.ts in B.module.ts.

I followed this article, so I have a package.json, index.ts and public_api.ts files in every module.

When I try to build the lib, I get the following error:

------------------------------------------------------------------------------
Building entry point '@org/library-name/src/lib/A'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to UMD
Minifying UMD bundle
Writing package metadata
Built @org/library-name/src/lib/A

------------------------------------------------------------------------------
Building entry point '@org/library-name/src/lib/B'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: Unable to write a reference to CComponent in /.../projects/library-name/src/lib/C/C.component.ts from /.../projects/library-name/src/lib/C/C.module.ts

Any idea on how to make it work? Thanks in advance.

Matan Reuven
  • 95
  • 1
  • 10

1 Answers1

2

I can tell you how I workarounded this problem.

The problem here is to understand how ng-packagr builds our libraries depending the entry-points/folder structure.

In my particular situation I had the following structure:

folder_structure

The output is 2 chunks, right? my-lib/common and my-lib/common/big-chunk

It happens that the secondary entry points are built BEFORE the main one, so having a shared logic, I will need to put it (and export it) on the secondary entry-point my-lib/common/big-chunk and use it on the main one my-lib/common.

If you find yourself with the need of sharing logic, consider to create a shared entry point.

I found very tricky to use and implement secondary entry points and some refactors might be needed to make them work and take the whole benefit they can bring, but overall I think it totally worth it :)

MigueMike
  • 189
  • 6
  • can you explain some more details with sample, In case C component is globally shared so how we can use with B component and same time A component also. – dhana Apr 20 '21 at 10:23
  • @MiguelSsSRrR, in my use case, I need to use a common singleton service on two different independent entry points (say A and B module). Can you help me to understand how to call the common singleton service in two independent modules. – sarangan Apr 20 '21 at 11:23
  • 3
    @dhana @sarangan I think you both have the same use case, and it is an extension of what I have explained above - You need to create a separated entry point just for the shared logic (doesn't matter if it is a service, component or just a function), and import it on the consumers. - Let's assume you create a `my-lib/common/shared` entry point with the logic you want to share. - On consumer A or B you will need to `import {FantasticLogic} from 'my-lib/common/shared'` – MigueMike Apr 20 '21 at 14:13
  • @MiguelSsSRrR thanks a lot. It is working as expected – sarangan Apr 21 '21 at 09:45