Short Imports with TypeScript Path Mapping in tsconfig

Question

I'm trying to create short importes for my Angular Modules.

Below is what I've modified in tsconfig.base.json file.

{
  "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"
  ]
}

Module path: 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';

In my component if I import, SharedGlobalService

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

I'm getting the below error.

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

What I'm doing wrong here ? Please help.

Update: Folder Structure

Update

After updating the baseUrl, I'm getting the below error

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.

user_598683 · Answer

Paths are relative to the baseUrl value.

Example... if your tsconfig.json lives at the project root, and your Angular application code lives in src, also at the root, you can specify the baseUrl as src.

From there, paths start at src.

Let's say you have a src -> lib directory and want to make a path for that:

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

Then you can reference an import as:

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

Hope that helps you out.

Short Imports with TypeScript Path Mapping in tsconfig

1 Answers