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

I believe the problem is simply with the path. You wrote baseUrl to be src but you write paths as if it was ./. Say here's the structure of your workspace:

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

You can have this in your my-app:

import {MyWidgetsModule} from "my-widgets";

And in tsconfig you need to add paths:

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

Or if you want to use uncompiled version, be able to edit it and have ng serve pick up the changes:

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

It also depends on the entry points of the library, by default, I believe, angular cli creates it the way I wrote above, gathering all importable items inside src/public-api.ts.