如何避免在 Angular 2 中使用非常长的相对路径进行导入

Question

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

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

Answer 1

TypeScript 2.0+

在 TypeScript 2.0 中，您可以在 tsconfig.json 中添加baseUrl属性：

{
    "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"
  }
}

例：

// before:
import {XyService} from '../../../services/validation/xy.service';
// after:
import { XyService } from 'app/services/validation/xy.service';

自从 Angular-CLI 出现以来，这几乎对我有用。