Search code examples
angularangular-librarymonoreponrwl

Angular MonoRepo Nx - use library in application


Situation: I am quite new to Angular and want to create an Angular workspace with multiple applications and libraries. I followed this tutorial to create an Angular workspace with Nx in form of a MonoRepo. I created an app and a lib following the steps presented in the tutorial.

So I have an app called first-app and a lib called first-lib. In the first-lib I have a component first-lib-component. I want to use the component or best the library itself like this in my first-app.html:

<h2> This is my first-app </h2>
<first-lib></first-lib> OR
<first-lib-component></first-lib-component>

I have imported the first-lib in the app.module.ts and added the first-lib-module to the imports.

Problem: I want to use the created library within my created application and that's the point where I currently fail. I get an error stating "'first-lib-component' is not a known element".

The Nx website states that:

... the clients of the library are in the same repository, so no packaging and publishing step is required.

If no packaging is required, how can I use my shared components/projects (libraries)?

My question: How can I import and use the (component of the) library in the application?


Solution

  • The component needs to be added to a module and exported and then that module needs to be imported into your application.