如何避免用很长的相对路径进口角2？ [英] How to avoid imports with very long relative paths in Angular 2?

问题描述

我怎样才能引入类似我的应用名/服务，以避免类似下面的行导入？

How can I introduce something like 'my-app-name/services' to avoid lines like following import?

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

这可能吗？也许我错过了什么？

Is this possible? Maybe I've missed something?

推荐答案

在打字稿2.0你可以添加的baseUrl 属性 tsconfig.json ：

TypeScript 2.0+

In TypeScript 2.0 you can add a baseUrl property in tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

然后你可以导入的一切，如果你是在基本目录：

Then you can import everything as if you were in the base directory:

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

在此之上，你可以添加一个路径属性，它可以让你匹配一个模式然后映射出来。例如：

On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

这将让你在任何地方像这样导入：

Which would allow you to import it from anywhere like so:

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

从那里，你需要配置使用的是支持这些进口的名字以及任何模块加载。眼下打字稿编译器似乎并没有这些自动绘制出。

From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.

您可以阅读 GitHub的问题更多关于这一点。也有使用多个项目时，这是一个非常有用 rootDirs 属性。

You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.

我用再出口文件发现它可以变得更加容易。这是我做的：

I've found it can be made easier by using "re-export files". Here's what I do:

1. 在每个父文件夹，创建一个文件具有相同名称作为该文件夹中的每个文件夹。


2. 在这些文件中，再出口具有相同的名称，该文件的子文件夹中的每个文件。

示例

在你的情况，首先创建一个名为我的应用名称/服务/ validation.ts 。在这个文件中，有code：

In your case, first create a file called my-app-name/services/validation.ts. In this file, have the code:

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

然后创建一个名为我的应用名称/ services.ts 文件，并有该code：

Then create a file called my-app-name/services.ts and have this code:

export * from "./services/validation";

现在你可以使用你的服务，像这样：

Now you can use your service like so:

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

而一旦你在那里有多个文件，它会变得更加容易：

And once you have multiple files in there it gets even easier:

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

由于必须维护这些额外的文件是多一点的前期工作，但我发现它与较少的工作结束不负有心人。这是很容易做到大的目录结构的变化，它减少了你要做的进口数量。

Having to maintain these extra files is a bit more work upfront, but I've found it pays off in the end with less work. It's much easier to do major directory structure changes and it cuts down on the number of imports you have to do.

注意

在做这个有，你必须留意，不能做几件事情：

When doing this there's a few things you have to watch for and can't do:

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


2. 您不该返回一个文件夹，从相同的原始文件夹（从导出文件前，在验证一个文件夹被，做进口{} XyService重新导出文件./../验证; ）。我发现这和第一点可能会导致进口的差错没有被定义的。


3. 最后，你不能在具有相同名称的子文件夹2的出口。通常这不是一个问题，但。

1. You have to watch for circular re-exports. So if files in two sub-folders reference each other, then you'll need to use the full path.
2. You shouldn't go back a folder to a re-export file that exports files from the same original folder (ex. being in a file in the validation folder and doing import {XyService} from "./../validation";). I've found this and the first point can lead to errors of imports not being defined.
3. Finally you can't have two exports in a sub-folder that have the same name. Usually that isn't an issue though.

您可以看到正在使用这里。

这篇关于如何避免用很长的相对路径进口角2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！