如何避免在Angular 2中input很长的相对path？

我怎样才能引入像'my-app-name/services'以避免行像下面的导入？

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

在TypeScript 2.0中，你可以在tsconfig.json添加一个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";

从那里，你将需要configuration你用来支持这些导入名称的模块加载器。现在TypeScript编译器似乎不会自动映射出来。

你可以在github的问题上阅读更多。还有一个rootDirs属性，在使用多个项目时非常有用。

我发现使用“重新导出文件”可以使它变得更容易。这就是我所做的：

例

在你的情况下，首先创build一个名为my-app-name/services/validation.ts 。在这个文件中，有这样的代码：

 export * from "./validation/xy.service";

然后创build一个名为my-app-name/services.ts并具有以下代码：

 export * from "./services/validation";

现在你可以使用你的服务了：

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

一旦你有多个文件，它变得更加容易：

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

不得不维护这些额外的文件是前面多一点的工作，但我发现最终以更less的工作得到回报。做主要的目录结构变化要容易得多，它减less了你必须做的import数量。

警告

当你这样做的时候，有几件事情你必须注意，不能做：

你必须留意循环再出口。因此，如果两个子文件夹中的文件相互引用，则需要使用完整path。
您不应该将文件夹返回到从同一个原始文件夹导出文件的重新导出文件（例如，位于validation文件夹中的文件中，并import {XyService} from "./../validation"; ） import {XyService} from "./../validation"; 。我发现这一点，第一点可能会导致未定义的导入错误。
最后，您不能在具有相同名称的子文件夹中有两个导出。通常这不是一个问题。

你可以在这里看到一个真实的例子。