Importing a publishable library into another library Fails Angular

Question

I am trying to find a Fix for Importing libs in Angular .

I am following this open issue on github.

I am not able to get my head around this . My First Library is build and there in dist folder and in my new library when i try and import i get various errors.

Steps i have Tried

1) Importing in tsconfig.lib.json as per the open issue on github under complier options

Import in NgModule of the unpublished lib

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

even tried with

import {MyWidgetsModule} from "my-widgets";




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

Error stack

'rootDir' is expected to contain all source files.

2)

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

Note

My Main tsconfig file contains all the proper imports .

I build both the libraries using Angular cli command ng g library <name>

Edit

{
  "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/*"
      ]
    }
  }
}

I have created four libs so please donot get confused ..

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.