BUILD with @angular-devkit/build-angular:browser and SERVE with @angular-builders/custom-webpack:dev-server

Question

I have an angular workspace with this structure:

├── projects
│    ├── lib-1
│    ├── lib-2
│    ├── lib-wrapper
│    .
│    .
│
└── src
     ├── app
     ├── assets
     .
     .  

where I develop my libraries and test it directly on my app (src). In particular lib-wrapper imports lib-1 and lib-2 and then app imports lib-wrapper.
Until today, to test "runtime" the libraries adn to have live reloading for each change of a lib, I have to import lib-wrapper and lib-1/2 with the ugly import form import {x} from ../../../lib-1/src/public-api.ts or something like that. When I have to build the libraries and the application I have to change all imports in "installed version" like import {x} from lib-1 (the same for lib-wrapper).

Did someone knows the correct configuration of tsconfig.json, tsconfig.app.json and angular.json in section architect.build.builder and architect.serve.builder to import libraries always with form import {x} from lib-1 and to use direct import to have live reloading when I serve my app, and to use installed libraries when I build the app?

Note: my angular version is
Angular CLI: 14.2.5
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 14.2.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package	Version
@angular-devkit/architect	0.1402.5
@angular-devkit/build-angular	14.2.5
@angular-devkit/core	12.2.18
@angular-devkit/schematics	12.2.18
@angular/cdk	14.2.4
@angular/flex-layout	10.0.0-beta.32
@angular/material	14.2.4
@angular/material-moment-adapter	14.2.4
@schematics/angular	12.2.18
ng-packagr	14.2.1
rxjs	6.6.7
typescript	4.6.4