Angular - Can't import a component from a library - html

Question

I'm learning Angular and I decided to create separate generic elements in addition to the main project (in a library) and then import and use them according to my needs.
My problem is due to the fact that I can't import the generic components now... (I can import the Module from the library, but when I try to use my component's selector, Angular warns that the element is unknown to it and doesn't compile the server ).
Generic Component:
(.html)
<p>f-base-screen works!</p>
(.ts)
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'nx-flow-base-screen',
templateUrl: './f-base-screen.component.html',
styleUrls: ['./f-base-screen.component.scss'],
})
export class FBaseScreenComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
Library Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FBaseScreenComponent } from './f-base-screen/f-base-screen.component';
#NgModule({
imports: [
CommonModule
],
declarations: [
FBaseScreenComponent
],
exports: [
FBaseScreenComponent
],
})
export class FLibrariesModule {}
f-libraries.ts (exports the module and its components):
export * from './f-libraries.module';
export * from './f-base-screen/f-base-screen.component';
My SharedModule (it's later imported into my app.module):
import { CommonModule } from "#angular/common";
import { NgModule } from "#angular/core";
import { FLibrariesModule } from "#nx-flow/f-libraries";
#NgModule({
imports: [CommonModule, FLibrariesModule],
exports: [CommonModule, FLibrariesModule],
providers: []
})
export class SharedModule {}
App.module.ts:
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FRestService } from './shared/utils/rest.service';
import { SharedModule } from './shared/shared.module';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule, SharedModule],
exports: [],
providers: [FRestService],
bootstrap: [AppComponent],
})
export class AppModule {}
My Home.component.module.ts (which imports the SharedModule to use the nx-flow-base-screen component):
import { NgModule } from '#angular/core';
import { WelcomeService } from '../../shared/services/flow-services/welcome.service';
import { SharedModule } from '../../shared/shared.module';
import { FRestService } from '../../shared/utils/rest.service';
import { HomeComponent } from './home.component';
#NgModule({
declarations: [HomeComponent],
imports: [SharedModule],
providers: [WelcomeService, FRestService],
bootstrap: [HomeComponent],
})
export class HomeComponentModule {}
My Home.component.html (using the component, the error that appears in the image is the same as angular throws when I compile):
<div>
<span>Home Page</span>
</div>
<nx-flow-base-screen></nx-flow-base-screen>
I already researched and followed tutorials, none of them worked so far. Are there any changes I still need to make to be able to use my component, from the library, within my main project?
If any more files are needed to reach a conclusion, I'll post a print of it.
Error:
apps/flow/src/app/views/home/home.component.html:4:3 - error
NG8001: 'nx-flow-base-screen' is not a known element:
If 'nx-flow-base-screen' is an Angular component, then verify that it is part of this module.
If 'nx-flow-base-screen' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message.