如何配置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 tsconfig-paths-webpack-plugin awesome-typescript-loader的等价物，但无论我如何按照每个提供的说明进行操作，我都无法得到任何组合 - 我总是得到：

src / app / app.component.ts（3,40）中的错误：错误TS2307：找不到模块'@mylib'。

我错过了什么？

Answer 1

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

所述baseUrl 必须 ./src这个工作（其中src处于喷射角5的应用程式的根应用的源代码文件夹），该路径必须被改变为向上遍历一个多水平：

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

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