如何配置Angular 5以支持模块别名？

Question

我希望在整个项目中为一些文件夹添加别名以简化导入(并在发布之前实际测试我自己的库).

所以代替:

import { MyClass } from '../mylib/src/somefolder';

我想实现这个目标:

import { MyClass } from '@mylib';

我配置tsconfig.json如下:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@mylib": ["../mylib/src/"],
    }
    ...
  }
}

我的index.ts库src文件夹中有一个文件,如下所示:

export { MyClass } from "./MyClass";

我正在使用生成ng new XX和弹出的新项目ng eject.

我已经尝试了tsconfig-paths-webpack-plugin和awesome-typescript-loader等效的,但无论我按照每个提供的说明有多紧密,我都无法得到任何组合 - 我总是得到:

import { MyClass } from '../mylib/src/somefolder';

我错过了什么？

Answer 1

经过多次调查,我通过反复试验解决了这个问题.

的baseUrl 必须是./src这个工作(其中,src是在一个喷射角5的应用程式的根应用的源代码文件夹),该路径必须被改变为向上遍历一个多水平:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@mylib": [
        "../../mylib/src"
      ]
    },
    ...
}

目录结构中高于该值的任何内容都会失败.我相信有人能够在某个时候解释为什么会这样!