如何避免Angular 2中具有很长相对路径的导入？

Question

如何引入'my-app-name/services'类似以下导入的行？

import {XyService} from '../../../services/validation/xy.service';

Answer 1

TypeScript 2.0+

在TypeScript 2.0中,您可以baseUrl在tsconfig.json以下位置添加属性:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

然后,您可以导入所有内容,就像您在基本目录中一样:

import {XyService} from "services/validation/xy.service";

除此之外,您还可以添加一个paths属性,该属性允许您匹配模式然后将其映射出来.例如:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

哪个允许你从任何地方导入它:

import {XyService} from "services/xy.service";

从那里,您将需要配置您正在使用的任何模块加载器以支持这些导入名称.现在,TypeScript编译器似乎没有自动映射这些.

您可以在github问题中阅读更多相关信息.rootDirs在使用多个项目时,还有一个有用的属性.

Pre TypeScript 2.0(仍适用于TS 2.0+)

我发现使用"桶"可以使它变得更容易.

1. 在每个文件夹中,创建一个index.ts文件.
2. 在这些文件中,重新导出文件夹中的每个文件.

例

在您的情况下,首先创建一个名为的文件my-app-name/services/validation/index.ts.在这个文件中,有代码:

export * from "./xy.service";

然后创建一个名为的文件my-app-name/services/index.ts并拥有以下代码:

export * from "./validation";

现在您可以像这样使用您的服务(index隐含):

import {XyService} from "../../../services";

一旦你有多个文件,它就会变得更容易:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

必须维护这些额外的文件需要更多的工作(使用桶维护者可以消除工作),但我发现它最终会以较少的工作得到回报.执行主要目录结构更改会更容易,并且会减少您必须执行的导入数量.

警告

这样做有一些你必须注意的事情,不能做:

1. 你必须注意循环再出口.因此,如果两个子文件夹中的文件相互引用,那么您将需要使用完整路径.
2. 您不应该从同一原始文件夹中返回文件夹(例如,在验证文件夹中的文件中并且正在执行import {XyService} from "../validation";).我发现了这一点,第一点可能导致导入错误未被定义.
3. 最后,在子文件夹中不能有两个具有相同名称的导出.通常这不是问题.

Answer 2

最好在tsconfig.json中使用以下配置

{
  "compilerOptions": {
    "...": "reduced for brevity",

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

Angular 6之前的传统方式:

`import {XyService} from '../../../services/validation/xy.service';`

应该重构为:

import {XyService} from '@app/services/validation/xy.service

简短又甜蜜!

Answer 3

我刚刚遇到这个问题。我知道现在已经过去了，但对于任何遇到它的人来说，都有一个更简单的答案。

我之所以遇到这个问题，只是因为我长期以来一直在做的事情停止工作，并且我想知道 Angular 7 中是否发生了某些变化。不，这只是我自己的代码。

不管怎样，我只需要更改一行tsconfig.json即可避免长导入路径。

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

例子：

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

自从 Angular-CLI 出现以来，这对我来说非常有效。