tsconfig 中使用 TypeScript 路径映射的短导入

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';

希望对你有所帮助。