'paths is not working in tsconfig.app.json as expected

I am using Angular to develop my website. And I wanna set a BASE_API for my project depends on prod or dev. Therefore, I add some code in environment

  export const environment = {
    production: true,
    BASE_API: 'http://localhost:3000/',
  };

And I wanna use import { environment } from '@environments/environment' to import instead of import { environment } from '../../../environments/environment'; So I set tsconfig.app.json just like below

  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "module": "es2015",
      "baseUrl": "./",
      "paths": {
        "@angular/*": [
          "../node_modules/@angular/*"
        ],
        "@environments/*": [
          "../src/environments/*"
        ]
      }
    },
  }

And my project structure as below

 src
    app
    environments
            environment.prod.ts
            environment.ts

However, the VSCode shows:

ERROR in src/app/user/article/article.service.ts(3,29): error TS2307: Cannot find module '@environments/environment'.

How can I fix this problem?

node.jsangulartypescript


Solution 1:[1]

This is called alias. Aliasing our app and environments folders will enable us to implement clean imports which will be consistent throughout our application.

To be able to use aliases you have to add baseUrl and paths properties to tsconfig.json file.

So here in your code, just change your baseUrl to src

 {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "module": "es2015",
      "baseUrl": "src",
      "paths": {
         "@app/*": ["app/*"],
         "@environments/*": ["environments/*"]
       }
    }
  }

Now you can import environment file like: 

import { environment } from '@environments/environment

Solution 2:[2]

I also had issues with this. Some paths were even written out exactly the same, but one path worked, and the other didn't. Spent a few hours researching and trying all kinds of different stuff, but it seemed that the solution was easier than I thought. The only thing I had to do was restart the TypeScript server.

A) If you have an active ng serve, restart the ng serve

  1. CTRL + C
  2. ng serve

B) If you don't have an active ng serve, do this:

  1. Command + Shift + P
  2. Search for "TypeScript: Restart TS Server"
  3. Hit enter

Solution 3:[3]

This is one of top search results in google for this question, so I thought I'd add what worked for me...

restart 'ng serve'

Yep, that was it. Turns out changes to 'tsconfig.json' are not picked up dynamically. Sometimes we go days changing things and forget that 'ng serve' is dynamically picking things up and recompiling, so it wouldn't be an obvious first choice that this is something it wouldn't pick up.

Solution 4:[4]

The solution is to let the vscode recognition tsconfig.app.json

Add file tsconfig.json

 app
    src
    tsconfig.json
    tsconfig.app.json

tsconfig.json

{
    "files": [],
    "references": [
        { "path": "./tsconfig.app.json" },
       
    ]
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Eldin Kajdic
Solution 3 John Q
Solution 4 superchong

Related Questions