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。因此，我加"@shared/*": ["app/shared/*"]在compilerOptions了的tsconfig.json文件。

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

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

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

希望这可以帮助某人。

详细信息可以在Typescript 文档中找到。