Angular library with multiple modules

Type of Issue

[ ] Bug Report
[ ] Feature Request
[x] Question

Description

I have an Angular 7 library which has 4 modules. The 4 modules are independent. Only one of these modules has a peer-dependency for Angular-material.

When I try to use only one of the other 3 modules I get the error that I should install Angular-material.

I did some research & I found that in the generated bundles under ( esm5/esm2015/fesm5/fesm2015), I only have one bundle whereas I need 4 bundles ( One for each module).

Is there a way to make 4 entries for these 4 modules?

Here’s my ng-package.json:

  "lib": {
    "entryFile": "src/public_api.ts",
    "umdModuleIds": {
      "lodash-es/isEqual": "lodash-es",
      "lodash-es/cloneDeep": "lodash-es",
      "lodash-es/filter": "lodash-es",
      "lodash-es/map": "lodash-es",
      "lodash-es/uniqueId": "lodash-es",
      "ajv": "ajv",
      "ajv/lib/refs/json-schema-draft-06.json": "jsonDraft6"
    }
  }

Version Information

  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.0.1",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.0",
    "@angular/http": "^7.0.0",
    "@angular/material": "^7.0.1",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/router": "^7.0.0",
    "brace": "^0.11.1",
    "core-js": "^2.5.4",
    "lodash-es": "^4.17.11",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.2",
    "@angular-devkit/build-ng-packagr": "~0.10.2",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/language-service": "^7.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.110",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^1.3.1",
    "ng-packagr": "^4.4.0",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tsickle": ">=0.29.0",
    "tslib": "^1.7.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.3",
    "webpack-bundle-analyzer": "^3.0.3"
  }

[JoostK]

This is a great question! In order to understand the intricacies involved, let’s dive in.

You are seeing that all modules are collapsed into a single bundle (of multiple formats) as a bundle corresponds with an entry-point, of which you have only one. Therefore, if you want multiple bundles you’d need to have multiple entry-points. This is possible in ng-packagr by means of secondary entry-points, as documented here.

Once you have multiple entry-points, you’ll see that ng-packagr creates separate bundles according to the Angular Package Format specification. While that is beneficial in itself, unfortunately it still won’t allow to declare Material as a a peer dependency of only a single bundle.

To understand why that is still not possible, you need to know that peer dependencies can only be specified per NPM library, not per entry-point. Entry-points work because node’s module resolution system takes any nested package.json files into considering, whereas only the root-level package.json file is relevant for NPM publishing. To reiterate: secondary entry-points do not participate in any way in NPM’s dependency system, they only exist for module discovery.

Since the system that verifies peer-dependencies is NPM and that system does not consider nested package.json files, it is not possible to specify a peer dependency per entry-point. You would need to introduce multiple separate NPM libraries, although the additional overhead may not be desirable.

[nayfin]

@hamzahamidi I need to refactor my library into multiple libraries and publish them individually for the exact same reasons. I just found this tutorial. Hope it helps.