How to structure a big Angular library

Question

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.

Answer 1

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:

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

Answer 2

I do it the following way, including mock and storybook files for an angular 18 library with standalone components:

projects/
    └── my-angular-library/
        ├── src/
        │   ├── lib/
        │   │   ├── components/
        │   │   │   ├── component-one/
        │   │   │   │   ├── component-one.component.css
        │   │   │   │   ├── component-one.component.html
        │   │   │   │   ├── component-one.component.spec.ts
        │   │   │   │   ├── component-one.component.ts
        │   │   │   │   ├── component-one.mock.ts
        │   │   │   │   └── component-one.stories.ts
        │   │   │   ├── component-two/
        │   │   │   │   ├── component-two.component.css
        │   │   │   │   ├── component-two.component.html
        │   │   │   │   ├── component-two.component.spec.ts
        │   │   │   │   ├── component-two.component.ts
        │   │   │   │   ├── component-two.mock.ts
        │   │   │   │   └── component-two.stories.ts
        │   │   ├── services/
        │   │   │   ├── some.service.ts
        │   │   │   └── ...
        │   │   ├── directives/
        │   │   │   ├── some.directive.ts
        │   │   │   └── ...
        │   │   ├── pipes/
        │   │   │   ├── some.pipe.ts
        │   │   │   └── ...
        │   │   ├── utils/
        │   │   │   ├── helper-function.ts
        │   │   │   └── ...
        │   │   ├── assets/
        │   │   │   └── i18n/
        │   │   │       ├── en.json
        │   │   │       ├── fr.json
        │   │   │       └── ...
        │   │   └── public-api.ts
...

My models are defined in the component classes, however this could also be done in a seperated models folder under lib