路径在 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

这称为别名。别名我们的应用程序和环境文件夹将使我们能够实现干净的导入，这将在我们的整个应用程序中保持一致。

为了能够使用别名，您必须将 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 2

我也遇到了这个问题。有些路径甚至写出完全相同，但一条路径有效，而另一条则没有。花了几个小时研究和尝试各种不同的东西，但似乎解决方案比我想象的要容易。我唯一要做的就是重新启动 TypeScript 服务器。

A) 如果你有一个活跃的 ng serve，重启 ng serve

1. CTRL + C
2. 服务

B) 如果您没有有效的 ng 发球，请执行以下操作：

1. 命令 + Shift + P
2. 搜索“ TypeScript：重启 TS 服务器”
3. 按回车