路徑在 tsconfig.app.json 中沒有按預期工作

Question

我正在使用 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/environment”。

我該如何解決這個問題？

Answer 1

我也遇到了這個問題。 有些路徑甚至寫出完全相同，但一條路徑有效，而另一條則沒有。 花了幾個小時研究和嘗試各種不同的東西，但似乎解決方案比我想象的要容易。 我唯一要做的就是重新啟動 TypeScript 服務器。

A) 如果你有一個活躍的 ng serve，重啟 ng serve

1. CTRL + C
2. 服務

B) 如果您沒有有效的 ng 發球，請執行以下操作：

1. 命令 + Shift + P
2. 搜索“ TypeScript：重啟 TS 服務器”
3. 按回車

Answer 2

這稱為別名。 別名我們的應用程序和環境文件夾將使我們能夠實現在整個應用程序中保持一致的干凈導入。

為了能夠使用別名，您必須將baseUrl和paths屬性添加到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

Answer 3

這是這個問題在谷歌中的頂級搜索結果之一，所以我想我會添加對我有用的東西......

重新啟動'ng服務'

是的，就是這樣。 原來對 'tsconfig.json' 的更改不是動態獲取的。 有時我們花了幾天時間改變事情並忘記 'ng serve' 是動態地挑選和重新編譯的東西，所以這不是一個明顯的第一選擇，這是它不會挑選的東西。

Answer 4

解決方法是讓vscode識別tsconfig.app.json

添加文件 tsconfig.json

 app
    src
    tsconfig.json
    tsconfig.app.json

tsconfig.json

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

Answer 5

解決方案

如果您已經嘗試了所有建議的解決方案，但都沒有奏效：

在啟動時，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建議，但只有上述配置適用於我的情況。