将可发布库导入另一个库失败 Angular

Question

我正在尝试找到在 Angular 中导入库的修复程序。

我在github 关注这个未解决的问题。

我无法理解这一点。我的第一个库已构建，并且在 dist 文件夹和我的新库中，当我尝试导入时出现各种错误。

我尝试过的步骤

1) 根据 github 上的 open issue 在编译器选项下导入 tsconfig.lib.json

在 NgModule 中导入未发布的库

import {MyWidgetsModule} from "../../../my-widgets/src/lib/my-widgets.module";

甚至尝试过

import {MyWidgetsModule} from "my-widgets";




    "paths": {
      "my-widgets/*": [
        "dist/my-widgets/*"
      ]
    }
  },

错误堆栈

'rootDir' 应该包含所有源文件。

2)

如果我删除了 ngModule 中的模块导入，我会收到无法找到的错误 模块。

注意

我的主 tsconfig 文件包含所有正确的导入。

我使用 Angular cli 命令 ng g library <name> 构建这两个库

编辑

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "my-widgets": [
        "dist/my-widgets"
      ],
      "my-widgets/*": [
        "dist/my-widgets/*"
      ],
      "my-widgets-extn": [
        "dist/my-widgets-extn"
      ],
      "my-widgets-extn/*": [
        "dist/my-widgets-extn/*"
      ],
      "my-framework": [
        "dist/my-framework"
      ],
      "my-framework/*": [
        "dist/my-framework/*"
      ],
      "my-framework-extn": [
        "dist/my-framework-extn"
      ],
      "my-framework-extn/*": [
        "dist/my-framework-extn/*"
      ]
    }
  }
}

我已经创建了四个库，所以请不要混淆..

Answer 1

我相信问题出在路径上。您将baseUrl 写成src，但您将paths 写成./。说一下你的工作空间的结构：

dist/my-widgets (compiled)
projects/my-widgets (TS)
projects/my-app (ts)
tsconfig.json

您可以在我的应用程序中使用它：

import {MyWidgetsModule} from "my-widgets";

并且在 tsconfig 中你需要添加路径：

"baseUrl": "./",
"paths": {
  "my-widgets": [
    "dist/my-widgets"
  ]
}

或者如果你想使用未编译的版本，可以编辑它并让ng serve接受更改：

"baseUrl": "./",
"paths": {
  "my-widgets": [
    "projects/my-widgets/src/public-api"
  ]
}

它还取决于库的入口点，默认情况下，我相信 Angular cli 按照我上面写的方式创建它，将所有可导入的项目收集在 src/public-api.ts 中。