Короткий импорт с отображением пути TypeScript в tsconfig

Question

Я пытаюсь создать короткие импорта для своих модулей Angular.

Ниже показано, что я изменил в файле tsconfig.base.json.

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom",
      "esnext"
    ],
    "module": "esnext",
    "paths": {
      "@asfc/shared": ["projects/asfc-shared/src"],
      "@asfc/shared/*": ["projects/asfc-shared/*"],
      "@asfc/shared/global": ["projects/asfc-shared/src/lib/global"],
      "@asfc/shared/global/*": ["projects/asfc-shared/src/lib/global/*"],
      "@asfc/shared/tagging": ["projects/asfc-shared/src/lib/tagging"],
      "@asfc/shared/tagging/*": ["projects/asfc-shared/src/lib/tagging/*"],
      "@asfc/shared/testing": ["projects/asfc-shared/src/lib/testing"]
    },
  "exclude": [
    "tools"
  ]
}

Путь к модулю: projects / asfc-shared / src / public_api.ts

export * from './lib/global/index';
export * from './lib/tagging/index';
export * from './lib/testing/index';
export * from './lib/shared/index';

В моем компоненте, если я импортирую, SharedGlobalService

import { SharedGlobalService } from '@asfc/shared';

Я получаю ошибку ниже.

ERROR: projects/ubc-security-profile/src/lib/apollo.config.ts:5:37 - error TS2307: Cannot find module '@asfc/shared' or its corresponding type declarations.

Что я здесь делаю не так? Пожалуйста помоги.

Обновление: структура папки

Обновить

После обновления baseUrl я получаю следующую ошибку

Compiling TypeScript sources through ngc
ERROR: Unable to write a reference to SvgCaptchaComponent in /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.component.ts from /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.module.ts
An unhandled exception occurred: Unable to write a reference to SvgCaptchaComponent in /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.component.ts from /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.module.ts
See "/private/var/folders/33/jgk04z2d26nbtr965nyz88fw0000gp/T/ng-yirb2X/angular-errors.log" for further details.

Answer 1

Пути указаны относительно baseUrl ценность.

Пример... если ваш tsconfig.json живет в корне проекта, а код вашего приложения Angular живет в src, также в корне вы можете указать baseUrl как src.

Оттуда пути начинаются в src.

Допустим, у вас есть src -> lib каталог и хотите указать для этого путь:

"paths": {
  "@app/lib/*": ["app/lib/*"]
}

Затем вы можете ссылаться на импорт как:

import { yourExport } from '@app/lib/wherever';

Надеюсь, это поможет вам.