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

Question

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

我在 github 上关注这个未决问题.

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

我尝试过的步骤

1) 根据编译器选项下 github 上的开放问题导入 tsconfig.lib.json

在未发布的lib的NgModule中导入

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

甚至尝试过

import {MyWidgetsModule} from "my-widgets";




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

错误堆栈

'rootDir' is expected to contain all source files.

2)

If i remove the module import in ngModule i get error like cannot find module .

注意

我的主 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

你可以在你的 my-app 中有这个:

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 中收集所有可导入的项目。