在Angular CLI中避免相对路径 [英] Avoiding relative paths in Angular CLI
问题描述
我正在使用最新的Angular CLI,并且创建了一个自定义组件文件夹,该文件夹包含所有组件.
I'm using the latest Angular CLI, and I've created a custom components folder which is a collection of all components.
例如,TextInputComponent
有一个TextInputConfiguration
类,该类位于src/components/configurations.ts
内,在我使用它的src/app/home/addnewuser/add.user.component.ts
中有:
For example, TextInputComponent
has a TextInputConfiguration
class which is placed inside src/components/configurations.ts
, and in src/app/home/addnewuser/add.user.component.ts
where I use it there is:
import {TextInputConfiguration} from "../../../components/configurations";
这很好,但是随着我的应用程序越来越大,../
越来越多,我该如何处理?
This is fine but as my app gets larger and deeper the ../
increases, how do I handle this?
以前,对于SystemJS,我将通过system.config.js
配置路径,如下所示:
Previously, for SystemJS, I would configure the path through system.config.js
as below:
System.config({
..
map : {'ng_custom_widgets':'components' },
packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};
如何使用Angular CLI为webpack生成相同的内容?
How do I produce the same for webpack using Angular CLI?
推荐答案
每此注释,您可以通过tsconfig.json
中的paths
添加您的应用程序源:
Per this comment, you can add your application source via paths
in tsconfig.json
:
{
"compilerOptions": {
...,
"baseUrl": ".",
"paths": {
...,
"@app/*": ["app/*"],
"@components/*": ["components/*"]
}
}
}
然后,您可以绝对地从app/
或components/
导入,而不是相对于当前文件导入:
Then you can import absolutely from app/
or components/
instead of relative to the current file:
import {TextInputConfiguration} from "@components/configurations";
注意:如果paths
是,则必须指定 baseUrl
.
Note: baseUrl
must be specified if paths
is.
另请参见
这篇关于在Angular CLI中避免相对路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!