7

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

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • I think the main problem is that you're importing using `../../` like path instead of `@my-widgets/` path. Is your project on github ? Can you share it please ? – ibenjelloun Mar 01 '19 at 11:06
  • @ibenjelloun i have tried both if you see the question `even tried with import {MyWidgetsModule} from "my-widgets";` Its not on git and i dnt think i can share this – Rahul Singh Mar 01 '19 at 12:45
  • Can you at least share your `tsconfig.json` ? – ibenjelloun Mar 01 '19 at 13:38
  • Tsconfig.json of the main app or the json of the lib – Rahul Singh Mar 02 '19 at 09:24
  • The main app, the one containing the cutom paths generated by the nx workspace. – ibenjelloun Mar 04 '19 at 08:15
  • @ibenjelloun i have just added the same in the edit section of the question – Rahul Singh Mar 04 '19 at 10:13
  • It's weird that the paths are defined to point to `dist` folder, did you use the `cli` to generate your libraries ? – ibenjelloun Mar 04 '19 at 13:00
  • yes @ibenjelloun i did use cli for the same `ng g library ` – Rahul Singh Mar 04 '19 at 13:40
  • I just tried, the cli don't generate paths to 'dist'. You are using an nx workspace ? I don't understand what makes your cli generate paths to dist but its wrong, you should change it to the source folder. – ibenjelloun Mar 04 '19 at 15:19
  • i didn't get what you mean by `ng workspace` . change it to source means can you explain it a bit more like `my-ng/projects/my-widgets` . some thing like this . can you please elaborate @ibenjelloun – Rahul Singh Mar 05 '19 at 07:02
  • I'm talking about `nx workspace`, the github issue you have sent is related to `nx workspace`, so I though you were using it. Sorry I won't be able to help you more, good luck. – ibenjelloun Mar 05 '19 at 07:37

1 Answers1

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.

waterplea
  • 3,462
  • 5
  • 31
  • 47