避免 Angular CLI 中的相对路径

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

例如，TextInputComponent has a 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 生成相同的内容？

Per 这条评论 https://github.com/angular/angular-cli/issues/1465#issuecomment-236054952，您可以通过添加您的应用程序源paths in tsconfig.json:

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

然后你可以绝对导入app/ or components/而不是相对于当前文件：

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

Note: baseUrl必须指定，如果paths is.

See also

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