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

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

要使用别名，必须将tsUrl和path属性添加到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服务，请重新启动ng服务

CTRL + C
ng服务

B）如果没有有效的服务，请执行以下操作：

Command + Shift + P
搜索“ TypeScript：重新启动TS Server ”
点击进入

Answer 3

这是该问题在Google中搜索量最高的结果之一，所以我想我应该添加对我有用的内容...

重新开始“ ng服务”

是的，就是这样。事实证明，对'tsconfig.json'的更改不会动态获取。有时我们会花很多时间去改变事物，而忘记了“ ng serve”是动态地拾取并重新编译它们，因此不会会拾取它并不是显而易见的第一选择。 / p>

路径在tsconfig.app.json中无法正常工作

3 个答案: