如何在 Angular 7 中使用“@app/....”引用而不是文字路径？答案

【问题标题】：How to use '@app/....' references in Angular 7 instead of literal paths?如何在 Angular 7 中使用“@app/....”引用而不是文字路径？
【发布时间】：2019-11-06 16:48:20
【问题描述】：

尝试将我们的产品设置为在移动控件时不需要太多/任何参考更改。

当我使用来自 aspnetboilerplate.com 的预构建应用程序时，它们的所有服务/组件/管道/指令引用都是基于“@app/etc”路径而不是导出到的文件中的文字路径导入的，我希望能够使用它，但它似乎不适用于本机。

样板结构与使用 ng new 生成的应用程序相同，但它们可以使用

import { SomeService } from '@app/services/some-service.service';

而不是

import { SomeService } from '../../../services/some-service.service';

但这在我们的应用程序中不起作用，我无法弄清楚他们是如何设置的

找不到模块'@app/services/some-service.service'就是我得到的全部：/

【问题讨论】：

标签： angular import path reference export

【解决方案1】：

此功能与 Typescript 编译器有关，因此您需要更新 tsconfig.json 文件如下：

将此值添加到“路径”属性

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

【讨论】：

【解决方案2】：

这是魔法发生的 tsconfig.json 文件。它允许定义说明符和文件路径之间的映射。

你可以在这里找到官方文档：https://www.typescriptlang.org/docs/handbook/module-resolution.html

Netanel Basal 还写了一篇关于它的文章： https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6

【讨论】：