如何避免在Angular 2中使用相对路径较长的导入？

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

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

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属性，在使用多个项目时非常有用。

TypeScript 2.0之前的版本（仍适用于TS 2.0+）

我发现可以使用“ barrels”使其变得更容易。

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

不得不维护这些额外的文件需要做更多的事（可以使用barrel-maintainer消除工作），但是我发现最终可以减少工作量。进行主要的目录结构更改要容易得多，并且可以减少导入次数。

警告

在执行此操作时，您需要注意但不能做的几件事：

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

最好在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

简短而甜蜜！

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

我之所以碰到它，是因为我已经做了很长时间的某件事停止了工作，并且我想知道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出现以来，这几乎对我一直有效。