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.

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.