Search code examples
angularangular-cling-packagr

How to structure a big Angular library

I am creating a very big Angular library. Because I have many classes and components, I have structured them in a hierarchy. For example, I have:

  • Map
    • Panels
      • Toolbar
      • MainPanel
      • Etc.
    • Layers
      • BingLayer
      • WMSLayer
      • WMTSLayer
    • Geometries
      • Point
      • Line
      • Polygon etc.

In the public_api.ts, I have many exports, one for each component/module/service I want to expose on the library, but this flattens my hierarchy.

The only way I found to maintain the hierarchy is to create a library for each group on the hierarchy tree. For example, a library for Panels (Panels-lib), a library for Layers (Layers-lib) etc. and then replicate the hierarchy on the file system putting each library in a separated folder: a folder for Panels, a folder for Layers etc.

In this way, in the main application I can import components in this way:

import {ToolBar} from "MyMap/Panels/Panels-lib";
import {Line} from "MyMap/Geometries/Geometries-lib";

Is there a better way to achieve this? Thank You in advance.

Solution

  • I think this article can help https://medium.com/angular-in-depth/improve-spa-performance-by-splitting-your-angular-libraries-in-multiple-chunks-8c68103692d0

    Here is how you can setup your library exports in the most efficient way with multiple entry points:

    enter image description here

    Also checkout how they structuring the Angular Material components repo, as a reference.