避免 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?

推荐答案

Per 此注释，您可以通过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.

另见

• https://www.typescriptlang.org/docs/手册/模块分辨率.html#path-mapping

这篇关于避免 Angular CLI 中的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！