angular - การนำเข้าที่สั้นลงด้วยการแมปเส้นทาง TypeScript ใน tsconfig

ฉันกำลังพยายามสร้างการนำเข้าสั้น ๆ สำหรับโมดูล 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.

คำตอบ #1

เส้นทางสัมพันธ์กับค่าของ baseUrl

ตัวอย่าง... หากไฟล์ tsconfig.json ของคุณอยู่ที่รากของโปรเจกต์ และโค้ดแอปพลิเคชัน Angular ของคุณอยู่ใน src ซึ่งก็อยู่ที่รากเช่นกัน คุณสามารถกำหนด baseUrl เป็น src ได้

จากตรงนั้น เส้นทางเริ่มที่ src

สมมติว่าคุณมีไดเร็กทอรี src -> lib และต้องการสร้างเส้นทางสำหรับมัน:

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

แล้วคุณสามารถอ้างอิงการนำเข้าได้ดังนี้:

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

หวังว่านั่นจะช่วยคุณได้

angular - การนำเข้าที่สั้นลงด้วยการแมปเส้นทาง TypeScript ใน tsconfig

คำตอบ #1

บทความที่เกี่ยวข้อง