angular - 在 Angular CLI 中避免相对路径

Question

我使用的是最新的 Angular CLI，我创建了一个自定义组件文件夹，它是所有组件的集合。

例如，TextInputComponent 有一个 TextInputConfiguration 类，它位于 src/components/configurations.ts 中，在 src 中/app/home/addnewuser/add.user.component.ts 我用它的地方是:

import {TextInputConfiguration} from "../../../components/configurations";

这很好，但是随着我的应用变得越来越大和深入，../ 增加了，我该如何处理这个问题？

以前，对于 SystemJS，我会通过 system.config.js 配置路径，如下所示:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

如何使用 Angular CLI 为 webpack 生成相同的内容？

Answer 1

根据 this comment ，您可以通过 tsconfig.json 中的 paths 添加您的应用程序源:

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

然后你可以绝对地从 app/ 或 components/ 导入而不是相对于当前文件:

import {TextInputConfiguration} from "@components/configurations";

注意:如果 paths 是，则必须指定 baseUrl。

另见

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping