如何配置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等价物，但无论我按照每个提供的说明有多紧密，我都无法使用任何组合 - 我总是得到：

  

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

我错过了什么？

Answer 1

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

baseUrl 必须为./src才能生效（其中src是弹出的Angular 5应用中的根应用源代码文件夹），以及必须更改路径以再向上移动一级：

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

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