I have a library with a workspace containing two projects, one for the library itself and one for a test application.
├── projects
├── midi-app
└── midi-lib
In the workspace tsconfig.json
file I configured some @app
and @lib
paths:
"paths": {
"@app/*": ["projects/midi-app/src/app/*"],
"@lib/*": ["projects/midi-lib/src/lib/*"],
"midi-lib": [
"dist/midi-lib"
],
"midi-lib/*": [
"dist/midi-lib/*"
]
}
There is a projects/midi-lib/tsconfig.lib.json
file which extends on the above tsconfig.json
file:
"extends": "../../tsconfig.json",
There is a public-api.ts
file which contains:
export * from './lib/midi-lib.module';
I can use this library with the test application just fine.
But when I try using it in another client application, in another workspace, imported as a Node module, I get many errors on the unknown paths Can't resolve '@lib/...'
How to express the library paths so that they are exposed in a client application ? Or how to translate the library paths when packaging the library ?
As a side question, I wonder why the extends is not done the other way around. Why is it not the tsconfig.json
file that extends on the projects/midi-lib/tsconfig.lib.json
file ?
Here is how I package and then use the library:
To package the library, add the following scripts in the scripts array of the parent package.json
file
"copy-license": "cp ./LICENSE.md ./dist/midi-lib",
"copy-readme": "cp ./README.md ./dist/midi-lib",
"copy-files": "npm run copy-license && npm run copy-readme",
"build-lib": "ng build midi-lib",
"npm-pack": "cd dist/midi-lib && npm pack",
"package": "npm run build-lib && npm run copy-files && npm run npm-pack",
and run the command: npm run package
then install the dependency
npm install ../midi-lib/dist/midi-lib/midi-lib-0.0.1.tgz
and import the module in the application module In the app.module.ts
file have:
import { MidiLibModule } from 'midi-lib';
@NgModule({
imports: [
MidiLibModule
finally insert the component in a template
<midi-midi-lib></midi-midi-lib>
When the library is installed in a client application, it has lots of .d.ts
files in the node_modules/midi-lib
directories:
├── bundles
├── esm2015
│ └── lib
│ ├── device
│ ├── keyboard
│ ├── model
│ │ ├── measure
│ │ └── note
│ │ ├── duration
│ │ └── pitch
│ ├── service
│ ├── sheet
│ ├── soundtrack
│ ├── store
│ ├── synth
│ └── upload
├── esm5
│ └── lib
│ ├── device
│ ├── keyboard
│ ├── model
│ │ ├── measure
│ │ └── note
│ │ ├── duration
│ │ └── pitch
│ ├── service
│ ├── sheet
│ ├── soundtrack
│ ├── store
│ ├── synth
│ └── upload
├── fesm2015
├── fesm5
└── lib
├── device
├── keyboard
├── model
│ ├── measure
│ └── note
│ ├── duration
│ └── pitch
├── service
├── sheet
├── soundtrack
├── store
├── synth
└── upload
Like this one lib/service/melody.service.d.ts
file
import { SoundtrackStore } from '@lib/store/soundtrack-store';
import { ParseService } from '@lib/service/parse.service';
import { CommonService } from './common.service';
export declare class MelodyService {
private soundtrackStore;
private parseService;
private commonService;
constructor(soundtrackStore: SoundtrackStore, parseService: ParseService, commonService: CommonService);
addSomeMelodies(): void;
private addSoundtrack;
private generateNotes;
}
As can be seen, it contains references to the @lib
path mapping, which is not known in the client application.
I also tried to use the baseUrl
property as a work around, but that didn't help either, as when installing the library, this baseUrl
value was not specified.
Why is packaging the library with the command npm run package
not resolving the paths
mappings ?
from How to have absolute import paths in a library project?
No comments:
Post a Comment