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

Question

我想在整个项目中为一些文件夹设置别名以简化导入（并在发布前实际测试我自己的库）。

所以代替：

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

我想实现这个：

import { MyClass } from '@mylib';

我已将 tsconfig.json 配置如下：

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

我图书馆的 src 文件夹中有一个 index.ts 文件，如下所示：

export { MyClass } from "./MyClass";

我正在使用一个用 ng new XX 生成并用 ng eject 弹出的新项目。

我已经尝试了 tsconfig-paths-webpack-plugin 和 awesome-typescript-loader 的等价物，但无论我多么严格地遵循为每个组合提供的说明，我都无法使任何组合起作用 - 我总是得到:

ERROR in src/app/app.component.ts(3,40): error TS2307: Cannot find module '@mylib'.

我错过了什么？

Answer 1

经过大量调查，我通过反复试验解决了它。

baseUrl 必须为 ./src 才能正常工作（其中 src 是弹出 Angular 5 app), 必须更改路径以向上遍历一层:

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

目录结构中高于此的任何内容都会失败。我相信有人会在某个时候解释为什么会这样！

How can I configure Angular 5 to support module aliases?