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

发布时间：2020-12-17 17:24:00 所属栏目：安全来源：网络整理

导读：我希望在整个项目中为一些文件夹添加别名以简化导入(并在发布之前实际测试我自己的库). 所以代替： import { MyClass } from '../mylib/src/somefolder'; 我想实现这个目标： import { MyClass } from '@mylib'; 我已经配置了我的tsconfig.json,如下所示： {

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

所以代替：

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弹出弹出.

我已经尝试过tsconfig-paths-webpack-plugin和awesome-typescript-loader的等价物,但无论我如何按照每个提供的说明进行操作,我都无法得到任何组合 – 我总是得到：

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

我错过了什么？

解决方法

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

baseUrl必须是./src才能工作(其中src是弹出的Angular 5应用程序中的根应用程序源代码文件夹),并且路径必须更改为再遍历一个级别：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!