javascript - 如何在 Visual Studio Code 中设置 Angular 应用程序路径以导入没有前缀的组件？

Question

我想导入不带任何路径前缀的组件和服务，如下所示:

import { CarService } from 'services/car.service';

来自 Angular 应用程序结构中的文件，如下所示:

carproject
   src
      app (from here)
          components (from here)
             base (from here)
          pages (from here)
          services (from here)

目前 carproject 文件夹中的 tscongif.json 包含此基本 URL:

"baseUrl": "./src",

以及 src 文件夹中的 tscongif.app.json:

"baseUrl": "app" 

应用程序实际上允许以我在这个问题上提供的格式进行导入。应用程序正常启动。

但是Visual Code似乎不理解它。并显示错误:

Cannot find module 'services/car.service'.ts(xxx)

如何正确配置 baseUrls，以便我能够从上述位置导入没有路径前缀的组件和服务，并且 Visual Studio Code 也能够找到这些导入？

Answer 1

您应该更改 tsconfig.json。我假设您的服务代码位于 services 文件夹中，因此我将更改配置

"baseUrl": "./",
"paths": {
   "services/*": ["src/app/services/*"],
 },

然后你可以像这样导入

import { CarService } from 'services/car.service';