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

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 也能够找到这些导入？

标签： javascriptangulartypescriptsingle-page-applicationangular8

Answer 1

你应该改变你的 tsconfig.json。我假设您的服务代码在服务文件夹中，所以我将更改配置

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

然后你可以像这样导入

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