Angular2导入快捷方式

Question

我正在使用Angular 2和webpack开发一个应用程序。我想知道是否有一种方法可以为导入创建快捷方式？我的意思是，有时我需要从上层目录中导入组件，所以最终我会做这样的事情。

import { UserComponent } from '../../../models/users/user.ts';

理想情况下，只想要做到：

import {UserComponent} from '@models/users/user.ts';

或者更短一些。有没有创建快捷方式的方法？

谢谢

- Miguel Rosales

---

可能是重复的问题：如何为 TypeScript 编译器配置 baseUrl？ - Estus Flask

baseUrl 是 TS 所拥有的全部。使用任何预处理器来创建快捷方式将导致失去 IDE 的支持，这通常是最不希望看到的事情。 - Estus Flask

Answer 1

我知道这个问题已经存在很多年了，现在我们有Angular 7了，但是如果有人有同样的问题，这里有一个答案。

您可以在文件tsconfig.json中配置路径映射。

例如：假设我们有以下文件夹结构：

├── app
│   ├── app.component.html
│   ├── app.module.ts
│   ├── ...
│   └── shared
│       └── material
│           └── material.module.ts
...
...

我想在文件夹shared中添加一个“快捷方式”。因此，我在tsconfig.json文件的compilerOptions中添加了"@shared/*": ["app/shared/*"]。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@shared/*": ["app/shared/*"]
    },
   // ... and so on

现在我可以这样导入我的共享模块：

import { MaterialModule } from '@shared/material/material.module';

希望这能帮到某些人。

具体细节可以在Typescript文档中找到。

- BooFar