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 issue中详细了解相关信息。还有一个rootDirs属性，在使用多个项目时非常有用。

Pre TypeScript 2.0（仍适用于TS 2.0 +）

我发现使用"barrels"可以更轻松。

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

示例

在您的情况下，首先创建一个名为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";

必须预先维护这些额外的文件（使用barrel-maintainer可以消除这项工作），但我发现它最终会以较少的工作得到回报。它可以更容易地进行主要的目录结构更改，并且可以减少您必须执行的导入数量。

<强>注意

执行此操作时，您需要注意并执行以下操作：

你必须注意循环再出口。因此，如果两个子文件夹中的文件相互引用，那么您将需要使用完整路径。

您不应该从同一原始文件夹中返回文件夹（例如，在验证文件夹中的文件中并执行import {XyService} from "../validation";）。我发现了这一点，第一点可能会导致导入错误无法定义。

最后，在子文件夹中不能有两个具有相同名称的导出。通常这不是问题。

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

自Angular-CLI出现以来，这对我几乎一直有效。

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

3 个答案:

TypeScript 2.0 +

Pre TypeScript 2.0（仍适用于TS 2.0 +）