0

Shared Component Setup

I have a shared angular component, with as a secondary entry point a bunch of protractor utilities to make it easier to test from the consuming application. We don't do monorepo so the repository is dedicated only to that one particular shared component. We distribute that shared component through npm using git urls. Here's roughly the project structure:

-. (root folder)
 |-.dist
 | |- shared-component (distributables)
 |
 |-.projects
 | |
 | |-. shared-component (sources - library)
 | | |
 | | |-. e2e-utils
 | | | |- public_api.ts
 | | | |- package.json (2nd entry point)
 | | | |- ... (sources)
 | | |
 | | |-. src
 | | | |-. lib
 | | | | |- ... (sources)
 | | | |- public_api.ts
 | | |
 | | |- package.json (1st entry point)
 | |
 | |- test-harness (demo - application)
 |
 |- angular.json
 |- package.json
 |- tsconfig.json

in angular.json:

  • shared-component is defined as a library
  • test-harness is defined as an application

in package.json:

"files": [ "dist/shared-component" ],
"main": "dist/shared-component/bundles/shared-component.umd.js",
"module": "dist/shared-component/fesm5/shared-component.js",
"es2015": "dist/shared-component/fesm2015/shared-component.js",
"esm5": "dist/shared-component/esm5/shared-component.js",
"esm2015": "dist/shared-component/esm2015/shared-component.js",
"fesm5": "dist/shared-component/fesm5/shared-component.js",
"fesm2015": "dist/shared-component/fesm2015/shared-component.js",
"typings": "dist/shared-component/shared-component.d.ts",
"metadata": "dist/shared-component/shared-component.metadata.json",

in tsconfig.json:

"paths": {
  "shared-component": [
    "dist/shared-component"
  ],
  "shared-component/*": [
    "dist/shared-component/*"
  ]
}

Consuming Application Setup

in package.json:

"dependencies": {
  ...
  "shared-component": "git+<git-url>#<version>"
  ...
}

in app.module.ts:

import { SharedComponentModule } from 'shared-component';

in some.e2e.test.ts:

import { E2EUtils } from 'shared-component/dist/shared-component/e2e-utils'

Question

How do I shorten the above to a simple:

import { E2EUtils } from 'shared-component/e2e-utils'

Wonky solution

In the consuming application's tsconfig.json and foreach consumed shared-whatever:

"paths": {
  ...
  "shared-component/*": [
    "node_modules/shared-component/dist/shared-component/*"
  ],
  ...
},

I don't like that solution because it forces to add an extra entry per consumed package which is overhead. I'd like to believe there is a better solution out there (I've been wrong before).

Literature

Renaud
  • 4,569
  • 7
  • 41
  • 72

0 Answers0