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 alibrary
test-harness
is defined as anapplication
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
- angluar-cli library create secondary entry point (similar-ish but not the same I believe, different project setup)
- https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
- https://github.com/ng-packagr/ng-packagr/issues/199 (not terribly relevant but could be a source of inspiration)