我们如何使用 tsconfig“别名路径”导入 @ngModule 和其他定义

Question

repo: https://github.com/andreElrico/mono-repo-test

stackblitz: https://stackblitz.com/github/andreElrico/mono-repo-test (noop; only to navigate smoothly)

Let's assume the following structure:

root/
├── projects/
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── app4
│   ├── lib1

• app1 - DOES NOT WORK << why cant I use the alias-path defined in root tsconfig? ( "@lib1": ["projects/lib1/src/public-api"] ). Its a combination of app2 and app4 .
• The error message for app1: ` ERROR in projects/app1/src/app/app.component.ts:7:3 - error NG8001: 'lib-lib1' is not a known element:
  1. If 'lib-lib1' is an Angular component, then verify that it is part of this module.
  2. If 'lib-lib1' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (lib-lib1 component) `
• app2 - works - is the angular guided way. It uses a tsconfig -> path onto the dist/lib1 (build library output)
• app3 - works - uses relativ paths to the EXACT file location as you all have suggested
• app4 - works - uses relativ paths to the public_api.ts .

Why cant app1 not be compiled successfully? Thats the case I want to work with? Path wise it should all be correct :-/ ? The reason behind why I want to make app1 work is that I want to pull request on a library and a "test-app" already has all imports "library style" => (eg. @lib1). So its would be awesome to map the "normally" nodemodule path of "@lib1" to the exact sources of the library that are just siblings of this app. With that I can very fast debug and develop a new feature. Of course I would remove @lib1 from package.json fo the "test-app".

Answer 1

You have added the module into the providers:

https://github.com/andreElrico/mono-repo-test/blob/6939e4a36cd64a2f9df8e8abc8e3addf162a75cf/projects/app1/src/app/app.module.ts?fbclid=IwAR14_D6YilhHEsNep7azHpHPrGcMDlVAruDQa7dYDBIsBlkdGFaFyW-u-LE#L15

If you add the module to the imports array it should work as expected.

Answer 2

If your module is in the apps/app1 directory and the shared component you want to import is in sharedLibs/lib1 ; just do:

import { component } from "../../sharedLibs/lib1"

You can build a system that has a lot of up and down directory traversals this approach. My preferred approach would be a separate library in a private npm repo for anything beyond a demo project.

---

Edit :

To access the library through an alias without traversing the path structure; you should be able to edit the tsconfig.json file.

Look for compilerOptions.paths:

"paths": {
  "lib1/*": ["../../sharedLibs/lib1/*"],
  "lib2/*": ["../../sharedLibs/lib2/*"],
  "lib3/*": ["../../sharedLibs/lib3/*"]
}

These paths should be looked at for library projects before the node_modules is.