Error using angular component from my angular library

I'm trying to create a component lybrary to use in my various projects, the main problem is i cant manage to use a single component from the library.

I apologize in advance if i'm not giving enough info, but it's my first question here and i'm not really sure how much is enough.

So, both my project and the library are using the same angular version, 16.2.0. I created the library using the angular cli comman, which created the library inside a project folder in my workspace folder.

Folder Structure

Once created the first component to test, i built and published the library on npm, and installed it in my project. I'm building and publishing using "ng-packagr -p ng-package.json && npm publish" command. And updating using "npm install elysia-lib-src@latest" command.


The following code is to show that i imported the component in the module, and then both the module and the component again in the public api, because ivy wouldn't allow me to only import it in the module.

library component:

import { Component } from "@angular/core";

@Component({
selector: "lib-header-elysia-standard",
templateUrl: "./header-elysia-standard.component.html",
styleUrls: ["./header-elysia-standard.component.scss"],
})
export class HeaderElysiaStandardComponent {
public message: string = "Ciao, sono un header riutilizzabile!";
}


library module:

import { NgModule } from '@angular/core';
import { ElysiaLibSrcComponent } from './elysia-lib-src.component';
import { HeaderElysiaStandardComponent } from './components/complex/header-elysia-standard/header-elysia-standard.component';



@NgModule({
declarations: [
ElysiaLibSrcComponent,
HeaderElysiaStandardComponent
],
imports: [
],
exports: [
ElysiaLibSrcComponent,
HeaderElysiaStandardComponent
]
})
export class ElysiaLibSrcModule { }



public api file:

/*
* Public API Surface of elysia-lib-src
*/

export * from './lib/elysia-lib-src.service';
export * from './lib/elysia-lib-src.component';
export * from './lib/elysia-lib-src.module';

/*
* ======================================================
* Single Components
* ======================================================
*/
export * from './lib/components/complex/header-elysia-standard/header-elysia-standard.component';



Here is the code in my project, where i imported the library module from the node_modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ElysiaLibSrcModule } from 'node_modules/elysia-lib-src/src/lib/elysia-lib-src.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomePageComponent } from './components/pages/home-page/home-page.component';
import { AboutPageComponent } from './components/pages/about-page/about-page.component';
import { ProjectsPageComponent } from './components/pages/projects-page/projects-page.component';
import { WorkshopPageComponent } from './components/pages/workshop-page/workshop-page.component';


@NgModule({
declarations: [
AppComponent,
HomePageComponent,
AboutPageComponent,
ProjectsPageComponent,
WorkshopPageComponent

],
imports: [
BrowserModule,
AppRoutingModule,
ElysiaLibSrcModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


Then i tried to use the html component in the html of my project, but as soon as i do that everything brakes:

<div>
<lib-header-elysia-standard></lib-header-elysia-standard>
<h1>app entry point</h1>
<router-outlet></router-outlet>
</div>


CONSOLE ERROR that i recive:

ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
at getComponentDef (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2034:16)
at extractDirectiveDef (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:1863:12)
at c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2096:21
at Array.map (<anonymous>)
at c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2096:10
at createTView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:12133:63)
at getOrCreateComponentTView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:12082:28)
at createRootComponentView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:14241:49)
at ComponentFactory.create (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:14123:35)
at ApplicationRef.bootstrap (http://localhost:4200/vendor.js:49819:38) {stack: 'TypeError: Cannot read properties of undefine…ap (http://localhost:4200/vendor.js:49819:38)', message: "Cannot read properties of undefined (reading 'ɵcmp')"}

TypeError: Cannot read properties of undefined (reading 'ɵcmp')
at getComponentDef (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2034:16)
at extractDirectiveDef (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:1863:12)
at c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2096:21
at Array.map (<anonymous>)
at c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:2096:10
at createTView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:12133:63)
at getOrCreateComponentTView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:12082:28)
at createRootComponentView (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:14241:49)
at ComponentFactory.create (c:\Users\mosettij\Desktop\Jonathan\Gaia_In_ThePocket\Gaia_In_ThePocket_FE\node_modules\@angular\core\fesm2022\core.mjs:14123:35)
at ApplicationRef.bootstrap (http://localhost:4200/vendor.js:49819:38) {stack: 'TypeError: Cannot read properties of undefine…ap (http://localhost:4200/vendor.js:49819:38)', message: "Cannot read properties of undefined (reading 'ɵcmp')"}


i treid using the component esported from the library in my project but i get an error

Continue reading...