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

Question

尝试设置我们的产品以不需要太多/如果移动控制。

当我从Aspnetboilerplate使用预构建的应用程序时，其所有服务/组件/管道/指示参考是根据"@app/etc/etc"路径导入的，而不是从导出到的文件中的字面路径希望能够使用它，但似乎并不能本地工作。

样板结构与使用NG New生成的应用相同，但可以使用

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

而不是

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

但这在我们的应用程序中不起作用，我不知道它们如何设置

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

Answer 1

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

添加到"路径"属性此值

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

Answer 2

是魔术发生的tsconfig.json文件。它允许在指定路径和文件路径之间定义映射。

您可以在此处找到官方文档：https：//www.typescriptlang.org/docs/handbook/module-resolution.html

Netanel基底也写了一篇文章：https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6