Angular2 导入快捷方式

Question

我正在使用 angular 2 和 webpack 开发一个应用程序。我想知道，有没有办法为进口做捷径？我的意思是有时我需要从层次结构中的文件夹中导入组件，所以我最终会做这样的事情。

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

理想情况下只想做：

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

或者更短的东西。有没有办法创建快捷方式？

谢谢

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 Documentation。