如何避免在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 issue中详细了解此内容。还有一个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. 最后，子文件夹中不能有两个具有相同名称的导出。通常，这不是问题。

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 { whatever } from 'projects/my-project/src/app/hello.component';
// after:
import { whatever } from 'src/app/hello.component';

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