CODEWITHSUNDEEP
angulartypescript
Muhammad Ahsan
Muhammad Ahsan

Reputation: 689

Short TypeScript import statement syntax not working in Angular

I am trying to shorten the imports statements in my Angular project i.e 

import { AuthenticationService } from '../_services/authentication.service';

to

import { AuthenticationService } from '@app/_service';

I am following an article where the author has used this technique and I did as he described but when I try to serve the application, I am get the error that module '@app/_service is not found in terminal i.e 

  src/app/_helpers/jwt-interceptor.ts(6,41): error TS2307: Cannot find module '@app/_services'.

Author described to do the following changes in tsconfig.json

my tsconfig.json is as below.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "paths": {
    "@app/*": ["src/app/*"],
    "@environments/*": ["src/environments/*"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

I have tried this solution described in this video too but no luck. I am also using index.ts file to export all modules in a directory as described in article.

Short Imports with TypeScript Path Mapping

Any solution for this problem OR what am I doing wrong here?

Upvotes: 1

Views: 3180

Answers (4)

Murat Yıldız
Murat Yıldız

Reputation: 12032

If the shortened path does not work, try to build the project or restart the code editor e.g. VS Code.

For usage examples, see How to short path to file in Angular?.

Upvotes: 1

Muhammad Ahsan
Muhammad Ahsan

Reputation: 689

By changing the "baseUrl": "./" to "baseUrl": "src" and also omitting @ from paths object I am able to import without any error.

{
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "src",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2018",
          "dom"
        ]
      },
      "paths": {
        "app/*": ["app/*"],
        "environments/*": ["environments/*"]
      },
      "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
      }
    }

Upvotes: 1

Hamza
Hamza

Reputation: 19

I think you must add the service name at least in the import.

Have a look on this article

Upvotes: 0

uminder
uminder

Reputation: 26150

Add an index.ts file to your _services folder and make the following entry.

export * from './authentication.service';

Then make sure, your import matches the _services folder name (you may have forgotten the trailing 's').

Upvotes: 1

Related Questions