Cannot use one of my element declared in my own library - html

Question

I am trying to make a library that I can use a component from but angular says that the element I use is not recognized as an element. I am trying to export the VitalSignLinesListComponent.
The steps I follow are:
declare the component in the library module
export the component
in the library module
export the component in the public API
import the module from the library
place the element in the html
file
receive error
The error I am getting:
ERROR in src/app/app.component.html:2:1 - error NG8001:
'lib-vital-sign-lines-list' is not a known element: 1. If
'lib-vital-sign-lines-list' is an Angular component, then verify that
it is part of this module.
2. If 'lib-vital-sign-lines-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message.
COMPONENT:
#Component({
selector: 'lib-vital-sign-lines-list',
templateUrl: './vital-sign-lines-list.component.html',
styleUrls: ['./vital-sign-lines-list.component.css']
})
export class VitalSignLinesListComponent implements OnInit {
#Input()
idEdDossier: string;
}
LIBRARY MODULE:
import { NgModule } from '#angular/core';
import { VitalsignsComponent } from './vitalsigns.component';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
import { ModalInputComponent } from './modal-input/modal-input.component';
import { VitalSignLinesListComponent } from './vital-sign-lines-list/vital-sign-lines-list.component';
import { NgSelectModule } from '#ng-select/ng-select';
import { FormsModule } from '#angular/forms';
import { EcareLibModule } from 'ecarelib'
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { ComboBoxComponent } from './combo-box/combo-box.component';
import { ComboBoxPipe } from './combo-box/combo-box.pipe';
import { LogService } from './services/log.service';
import { ClickOutsideDirective } from './vital-sign-lines-list/click-outside.directive';
const appRoutes: Routes = [
{ path: 'modal', component: ModalInputComponent },
{ path: 'vitalSignLinesList', component: VitalSignLinesListComponent }
];
// #dynamic
#NgModule({
declarations: [
VitalsignsComponent,
ModalInputComponent,
VitalSignLinesListComponent,
ComboBoxComponent,
ComboBoxPipe,
ClickOutsideDirective
],
imports: [
BrowserModule,
HttpClientModule,
EcareLibModule.forRoot(),
NgSelectModule,
RouterModule.forRoot(appRoutes, { enableTracing: false }),
FormsModule,
NgbModule
],
providers: [LogService],
exports: [VitalsignsComponent, VitalSignLinesListComponent]
})
export class VitalsignsModule {
}
PUBLIC-API:
export * from './lib/vitalsigns.service';
export * from './lib/vitalsigns.component';
export * from './lib/vitalsigns.module';
export * from './lib/vital-sign-lines-list/vital-sign-lines-list.component';
IMPORT LIBRARY: (VitalsignsModule)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NgSelectModule } from '#ng-select/ng-select';
import { FormsModule } from '#angular/forms';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
import { EcareLibModule } from 'ecarelib';
import { VitalsignsModule } from 'vitalsigns';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EcareLibModule.forRoot(),
HttpClientModule,
RouterModule.forRoot([]),
VitalsignsModule,
NgbModule,
NgSelectModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML:
<lib-vital-sign-lines-list [idEdDossier]=idDossier></lib-vital-sign-lines-list>