record.factory is not a function error on Angular Javascript page

Question

When compiling my app and runnning, the HTML page displays as blank and will not show the app. I was able to use the Inspect tool on Google Chrome and Chrome is saying that record.factory is not a function, the page was working fine. However, I did recently update my angular version to the latest - so I am not sure if that has anything to do with it.

Here's my module.ts code, I suspect it's something with the Imports, usually that has been the case when I run into issues with the app not displaying:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';  
import { ItemService } from './items.service';
import { NewItemFormComponent } from './new-item-form/new-item-form.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { Platform } from '@angular/cdk/platform';
import { AutofillMonitor } from '@angular/cdk/text-field';
import { ContentObserver } from '@angular/cdk/observers';

@NgModule({
  declarations: [
    AppComponent,
    NewItemFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    FormsModule
  ],
  providers: [ItemService, Platform, BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    FormsModule, AutofillMonitor, ContentObserver],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any ideas?

Answer 1

I had a similar error, this comment's post helped me. It happens when you use packages compiled in different Angular versions:

"Packages must be compiled and ran using the exact same version of Angular; any other combination is not supported and likely to break in subtle ways."

Answer 2

You have to remove modules from providers array. Remove: BrowserModule, AppRoutingModule, HttpClientModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule, FormsModule

Answer 3

You need to comment

@Injectable() in your routing or injecting else

Example

//   @Injectable()  comment this code

 @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [] 
 })