Angular mono-repo library making using ng-packagr

Question

I have the below mono repo folder structure for my Angular application.

I am using library1 and library2 in app1/app2, also publishing both the libraries as .tgz separately to be consumed by other angular applications.

I am using ng-packagr to Compile and package Angular libraries in Angular Package Format (APF).

to create library using below commands :

   **ng build --library1**

   **npm pack**

In directory/angular.json

"projects": {
     "library1": {
        "root": "libs/library1",
        "sourceRoot": "libs/library1/src",
        "projectType": "library",
        "prefix": "library1",
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-ng-packagr:build",
                "options": {
                    "tsConfig": "libs/library1/tsconfig.lib.json",
                    "project": "libs/library1/ng-package.json"
                },
                "configurations": {
                    "production": {
                        "project": "libs/library1/ng-package.prod.json"
                    }
                }
            }
            }

In directory/libs/library1/ng-package.json

{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/library1",
"lib": {
    "entryFile": "src/index.ts"
}
}

What I Need :

1. Now I want to combine library1 and library 2 to create a single library may be libraryAll(libraryAll.tgz) which will export libray1 and library 2.

2. Also I need a shared module which will be consumed by both libraries and will be a part of final library package.

Answer 1

To combine two libraries into one i suggest you to create a third one that imports the first two and expose it with a different index.ts . This if you want to maintains it separately in all means.

Both the first and second library needs to be compiled before are used and exposed by the third one.

Ex. LibraryAllModule that exports Library1Module and Library2Module.

The index.ts will looks like:

export { LibraryAllModule } from './libs/libraryAll/library-all.module';
export { Library1Module } from './libs/library1/library1.module';
export { Library2Module } from './libs/library2/library2.module';

Or an other approach it could be to report the code from both libraries into a new library divided by modules.

The index.ts will looks like this:

export { LibraryAllModule } from './libs/libraryAll/library-all.module';
export { Library1Module } from './libs/libraryAll/library1/library1.module';
export { Library2Module } from './libs/libraryAll/library2/library2.module';

By combining the 2 libraries into a common library it will be also easier for you to crate a common module to share between both. You can declare it in the folder 'libraryAll' and import it in both libraries then.

Answer 2

I think that firstly you need to create multi-project structure that angular provides. You can generate libs and apps via the ng generate lib or ng generate application command.

Then for your libs you can package. Check this for more info: https://izifortune.com/multiple-packages-repository-with-angular/

Answer 3

Thanks for all your suggestions.

I solved the issue using ng packagr secondary entry points feature.

Inside library 1 I used existing library 2 and created another shared-library library 3.

With that I now can publish package for libraryAll in including libray 1, libray 2 and libray 3.

I am also able to publish individual libraries as well.

ng packagr secondary point

The only major blocker I faced is the import path for library (library-3) in library 1 and library 2 was throwing build error, I was getting rootDir issue as the path was outside the entry point folder. The solution for that I implemented was I imported it from node modules and published the final library.

The below link will explain secondary entry point structure.

The current structure is