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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

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.

Answer 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" },
       
    ]
}

Answer 5

Solution

If you have tried all of the suggested solutions and none of them worked:

On startup, React cleans up tsconfig.json to only keep the configuration that it expects to be there for it to work properly. paths property is one of those that it removes when it starts up.

In order for it to be recognized, we need to do the following:

1. Create a tsconfig.paths.json file in your root directory.
2. Put the following code in it, modifying the baseUrl and paths to fit your specific case.

// tsconfig.paths.json
{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@angular/*": [
          "../node_modules/@angular/*"
        ],
        "@environments/*": [
          "../src/environments/*"
        ]
      }
    }
}

3. Extend this file from your tsconfig.json

// Example tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["@emotion/react/types/css-prop", "node" ]
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json" // 👈 add this line
}

Edit:

If you are getting an error when starting your application (eg Module not found: alias path), you need to configure your webpack settings by adding your aliases.

alias: {
  ['@your-path']: path.resolve(__dirname, 'src/your-path'),
}

If you cannot directly configure webpack (eg you use cra):

1. npm i --save-dev react-app-rewired
2. Replace your scripts with

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

3. Create a config-overrides.js file in your root directory:

const path = require('path');

module.exports = function override(config, env) {
  // Enable path aliases
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      ['@utils']: path.resolve(__dirname, 'src/utils'),
      ['@utils/test-utils']: path.resolve(__dirname, 'src/utils/test-utils')
    }
  };

  return config;
};

4. run npm start

Note: There are many suggestions of using react-app-rewire-alias , but only the above configuration worked in my case.