Javascript – ERROR NG8001: ReadyToTalkComponent is not a known element – Already Declared in NgModule Angular 14

After upgrading the version to Angular 14, I encountered a lot of errors. Most of them were not known element. The component name was already declared under @NgModule in Declarations. Please see the contents below.

ng version

Angular CLI: 14.2.11
Node: 14.20.1
Package Manager: npm 6.14.17 
OS: darwin x64

Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.11
@angular-devkit/build-angular   14.2.11
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.2.8
@angular/cdk                    14.2.7
@angular/cli                    14.2.11
@angular/fire                   7.5.0
@angular/material               14.2.7
@ngtools/webpack                14.2.11
@nguniversal/express-engine     14.2.3
@schematics/angular             15.2.8
rxjs                            7.5.7
typescript                      4.8.4

shared.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReadyToTalkComponent} from './common/ready-to-talk/ready-to-talk.component';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [SOME_MODULES_HERE],
  declarations: [ ReadyToTalkComponent ],
  exports: [ ReadyToTalkComponent ]
})

export class SharedModule {}

app.module.ts

import { SharedModule } from './shared.module';

@NgModule({
  declarations: [SOME_COMPONENTS],
  imports: [ SharedModule ],
  providers: [SOME_SERVICES],
  bootstrap: [AppComponent]
})
export class AppModule { }

webinar.component.html

<app-ready-to-talk></app-ready-to-talk>

ready-to-talk.component.ts

@Component({
  selector: 'app-ready-to-talk',
  templateUrl: './ready-to-talk.component.html',
  styleUrls: ['./ready-to-talk.component.scss']
})

ERROR MESSAGE

Error: src/app/webinar/webinar.component.html:148:1 - error NG8001: 'app-ready-to-talk' is not a known element:
1. If 'app-ready-to-talk' is an Angular component, then verify that it is part of this module.
2. If 'app-ready-to-talk' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I’m not really sure if putting schemas: [CUSTOM_ELEMENTS_SCHEMA] under app.module.ts will solve the problem since it was already in Shared Module.

Thank you!

EDITED:
When I set the "aot": false in angular.json, the error above didn’t show.