angular6 how to import a library in another library?

Question

As the title suggests, I've generated a base library using ng generate library lib; and then I generated another library named lib2. I hope to use some base components or service from lib, so I imported lib in the lib2 module, but npm run build lib2 failed.

I recieved this error: error TS2307: Cannot find module 'lib'.

How can I properly import the base library? Any help is appreciated.

I put my test code in https://github.com/dyh333/ng6-test

Frivolity

Using Nx Workspace would make your life easier with multiples apps/libraries and dependecies. I suggest taking 30min to try it out : nrwl.io/nx/guide-nx-workspace – Tody

Answer 1

You will need to build your libs first, see this question Angular 6 CLI -> how to make ng build build project + libraries

If you take a look in the tsconfig.json file, it has been modified by adding paths for the libs - hence you need to build them to populate the dist folder.

"paths": {
  "lib": [
    "dist/lib"
  ],
  "lib2": [
    "dist/lib2"
  ]
}

Seizing

I had build the lib1 successful, but build the lib2 failed bacause the lib2 import the lib1. – Frivolity

ng build lib then ng build lib2 then ng serve - work fine with your repository code. – Seizing

emmm... could you tell your angular-cli and angular version ? thanks. this is my : Angular CLI: 6.1.0-rc.0; angular: 6.0.0 – Frivolity

I ran yarn install with your package.json, and ng --v returns @angular/cli: 6.0.8, Angular: 6.0.9, ng-packagr: 3.0.3. Perhaps ng-packagr is the culprit? Try deleting node_modules and re-installing. – Seizing

@Tody - I tried Nx this morning after your comment, but a few blocking problems - two ng generates failed and ng serve not working. – Seizing

No problem. Please accept the answer, I need the points to be able to comment on posts other than my own. – Seizing

BTW, you can also create libraries with npm, a method that predates Angular 6 by several centuries (javascript time). See Angular 2 - moving modules to their own project – Seizing

Hi this only works while using the libraries in my main application. But, if I want to use library1 component/class in library2, the same pattern doesn't seem working... Any insights if I need to update something... Note: I already tried by adding the paths section in my library2/tsconfig.lib.json in similar way it was added to root tsconfig.lib when we generate library – Centerpiece

@Centerpiece - I’m struggling with this problem in Angular 9. I have two libraries (lib1 y lib2). I created a demo component in the app (all of them in the same project). When I use lib1 in the app components there is no problem. However, when I use lib1 in lib2, my components are not imported correctly. Actually the template doesn’t know they exists. All the imports are done using the tsconfig paths. Did you find any solution to this problem? – Botnick

@Leones24, you need to import into the lib module (by default should be lib2-lib.module.ts) CUSTOM_ELEMENTS_SCHEMA from angular core, and then add it to the modules schemas @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA,], declarations: ... – Bifarious

Answer 2

I'll add an answer that extends the notion of using nx extensions (which I use for all my projects except quickee/stubs):

This assumes you have ng-packagr set up to build libs within the nx workspace.

Create your libs, etc. Let's say you have lib1, and lib2.

Now, say lib1 uses something from lib2.

• Build lib2
• npm link the build output of lib2, from the root of the repo.
• In lib1, import the assets you need from lib2 from the BUILT version, which would be configured based on the output you configured for that lib... ...NOT the version in tsconfig.ts!!! You want whatever you configured in the package.json of the linked lib in the "dest" property., which after linking, you should find in node_modules.
• build lib1
• profit!

This might sound a little odd, but if you think about it the sense is there. You're using the libs exactly the same way as if you were using them in an external app (well, not exactly the same, you're linking them, but that simulates the process of a package.json install).

Note that also, within the mono repo, you can just use relative imports across libs (again ignore the tsconfig path entries and just use relative pathing to grab files from other libs). It works, probably not technically correct but may save you some headaches.

I crashed right into this question in a big project, and it was mine to solve, I found both these methods satisfied the need, presented both to the team, and to me, was ok with whatever they said (apologies for declining to discuss the team's decision).

Note that I see no reason this wouldn't work in a non-nx-extensions setup. But I rarely work with them anywhere, a big part of what I do is evangelizing monorepo dev and, when confronted with Angular, NX is what I work with the team on.

Aculeate

Answer 3

If you are import two library in module (there is no dependencies between two library); For example Module1 import lib1 want to use lib2 component;

In lib1.module.ts export your sharig component like

exports: [Component1]

In lib2.module.ts import your module for root like

imports: [lib1.forRoot()]

Then your component of lib2 you can use selector of Component1 like

<x-component></x-component>

Coulombe