Я использую Angular для разработки своего веб-сайта. И я хочу установить BASE_API для моего проекта зависит от prod или dev . Поэтому я добавляю некоторый код в environment

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

И я хочу использовать import { environment } from '@environments/environment' для импорта вместо import { environment } from '../../../environments/environment'; поэтому я установил tsconfig.app.json точно так же, как показано ниже

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

И структура моего проекта, как показано ниже

  src
    app
    environments
            environment.prod.ts
            environment.ts
  

Однако VSCode показывает:

ОШИБКА в src / app /user /article /article.service.ts(3,29): ошибка TS2307: не удается найти модуль «@environments / окружающая среда».

Как я могу исправить эту проблему?

Это называется псевдонимом. Изменение псевдонимов наших папок app и environments позволит нам реализовать чистый импорт, который будет согласован во всем нашем приложении.

Чтобы иметь возможность использовать псевдонимы, вы должны добавить свойства baseUrl и путей в файл tsconfig.json.

Итак, здесь, в вашем коде, просто измените ваш baseUrl на src

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

Теперь вы можете импортировать файл среды, такой как:

 import { environment } from '@environments/environment
  

У меня также были проблемы с этим. Некоторые пути были даже выписаны точно так же, но один путь работал, а другой нет. Потратил несколько часов на изучение и пробование всевозможных материалов, но оказалось, что решение было проще, чем я думал. Единственное, что мне нужно было сделать, это перезапустить сервер TypeScript.

A) Если у вас есть активная служба ng, перезапустите службу ng

1. CTRL C
2. ng serve

Б) Если у вас нет активной службы ng, сделайте это:

1. Command Shift P
2. Найдите «TypeScript: перезапустите TS Server«.
3. Нажмите enter

Это один из лучших результатов поиска в Google по этому вопросу, поэтому я подумал, что добавлю то, что сработало для меня…

перезапустите ‘ng serve’

Да, так оно и было. Оказывается, изменения в ‘tsconfig.json’ не обрабатываются динамически. Иногда мы тратим дни на то, чтобы что-то менять, и забываем, что ‘ng serve’ динамически собирает данные и перекомпилирует, поэтому не было бы очевидным первым выбором, что это то, что он не поймет.

Решение состоит в том, чтобы разрешить распознавание vscode tsconfig.app.json

Добавьте файл tsconfig.json

  app
    src
    tsconfig.json
    tsconfig.app.json
  

tsconfig.json

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

Решение

Если вы перепробовали все предложенные решения, и ни одно из них не сработало:

При запуске React выполняет очистку, tsconfig.json чтобы сохранить только ту конфигурацию, которая, по его ожиданиям, должна быть там, чтобы она работала должным образом. paths свойство является одним из тех, которые оно удаляет при запуске.

Для того, чтобы это было распознано, нам нужно сделать следующее:

1. Создайте tsconfig.paths.json файл в своем корневом каталоге.
2. Поместите в него следующий код, изменив baseUrl и paths в соответствии с вашим конкретным случаем.

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

3. Расширьте этот файл из вашего 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
}
  

Редактировать:

Если вы получаете сообщение об ошибке при запуске вашего приложения (например, модуль не найден: путь псевдонима), вам необходимо настроить параметры вашего webpack, добавив свои псевдонимы.

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

Если вы не можете напрямую настроить webpack (например, вы используете cra):

1. npm i --save-dev react-app-rewired
2. Замените ваши скрипты на

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

3. Создайте config-overrides.js файл в своем корневом каталоге:

 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. выполнить npm start

Примечание: Есть много предложений по использованию react-app-rewire-alias , но в моем случае сработала только приведенная выше конфигурация.