如何避免在 Angular 2 中导入相对路径很长的内容?
How to avoid imports with very long relative paths in Angular 2?
我怎样才能引入类似 'my-app-name/services'
的东西来避免像下面的导入这样的行?
import {XyService} from '../../../services/validation/xy.service';
打字稿 2.0+
在 TypeScript 2.0 中,您可以在 tsconfig.json
中添加 baseUrl
属性:
{
"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
文件。
- 在这些文件中,re-export文件夹内的每个文件。
例子
对于您的情况,首先创建一个名为 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 可以消除这些工作),但我发现它最终会以更少的工作得到回报。进行主要的目录结构更改要容易得多,并且它减少了您必须执行的导入次数。
注意
执行此操作时,有几件事是您必须注意但不能做的:
- 您必须注意通告 re-export。因此,如果两个 sub-folders 中的文件相互引用,则您需要使用完整路径。
- 您不应该从相同的原始文件夹返回文件夹(例如,在验证文件夹中的文件中并执行
import {XyService} from "../validation";
)。我发现了这一点,第一点可能导致未定义导入错误。
- 最后,sub-folder 中不能有两个同名的导出。不过通常这不是问题。
最好在 tsconfig.json
中使用以下配置
{
"compilerOptions": {
"...": "reduced for brevity",
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"]
}
}
}
Angular6 之前的传统方式:
`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 出现以来,这对我来说非常有用。
我怎样才能引入类似 'my-app-name/services'
的东西来避免像下面的导入这样的行?
import {XyService} from '../../../services/validation/xy.service';
打字稿 2.0+
在 TypeScript 2.0 中,您可以在 tsconfig.json
中添加 baseUrl
属性:
{
"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
文件。 - 在这些文件中,re-export文件夹内的每个文件。
例子
对于您的情况,首先创建一个名为 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 可以消除这些工作),但我发现它最终会以更少的工作得到回报。进行主要的目录结构更改要容易得多,并且它减少了您必须执行的导入次数。
注意
执行此操作时,有几件事是您必须注意但不能做的:
- 您必须注意通告 re-export。因此,如果两个 sub-folders 中的文件相互引用,则您需要使用完整路径。
- 您不应该从相同的原始文件夹返回文件夹(例如,在验证文件夹中的文件中并执行
import {XyService} from "../validation";
)。我发现了这一点,第一点可能导致未定义导入错误。 - 最后,sub-folder 中不能有两个同名的导出。不过通常这不是问题。
最好在 tsconfig.json
中使用以下配置{
"compilerOptions": {
"...": "reduced for brevity",
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"]
}
}
}
Angular6 之前的传统方式:
`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 出现以来,这对我来说非常有用。