Angular 14 showing error Uncaught (in promise): NullInjectorError

Question

I was trying to run my app but it just directly hit the error in the title. I am not sure what functions it even hit before coming out with that error. Below is my app.modules.ts and also the error.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { RouterModule } from '@angular/router'
import { BrowserModule } from '@angular/platform-browser'

import { ComponentsModule } from './components/components.module'
import { AppComponent } from './app.component'
import { HttpClientModule } from '@angular/common/http'
import { CommonModule } from '@angular/common'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes), ComponentsModule, HttpClientModule, CommonModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

The error shown inside the console

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[n -> n -> n -> n -> n]: 
  NullInjectorError: No provider for n!
NullInjectorError: R3InjectorError(n)[n -> n -> n -> n -> n]: 
  NullInjectorError: No provider for n!
    at zd.get (:1:287700)
    at Yd.get (:1:290380)
    at Yd.get (:1:290380)
    at Yd.get (:1:290380)
    at sm (:1:274936)
    at Object.Hn (:1:275037)
    at n.ɵfac [as factory] (:1:172431)
    at Yd.hydrate (:1:291761)
    at Yd.get (:1:290332)
    at Yd.get (:1:290380)
    at Fe (:1:138605)
    at Fe (:1:138097)
    at :1:139488
    at q.invokeTask (:1:129092)
    at Object.onInvokeTask (:1:343929)
    at q.invokeTask (:1:129012)
    at q.runTask (:1:124085)
    at xe (http://localhost:4200/polyfills.js:1:131522) {rejection: NullInjectorError: R3InjectorError(n)[n -> n…> n]: 
  NullInjectorError: No provider for…, promise: N, zone: q, task: q, stack: 'Error: Uncaught (in promise): NullInjectorErr…(http://localhost:4200/polyfills.js:1:131522)', …}