CODEWITHSUNDEEP
javascriptangulartypescript
libracorn
libracorn

Reputation: 317

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

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?

Upvotes: 7

Views: 9030

Answers (5)

mess around cantaloupe
mess around cantaloupe

Reputation: 1

The problem I'm having is after upgrading from 9 to 11, but @Injectable wasn't automatically added to app.module.ts when I upgraded. My problem does not seem to be caused by @Injectable.

This comment helped me a lot, I had this problem when I verified all @angular packages version 11.0.0, using the version in this list will fix it.

├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
└─ @angular/[email protected]

Upvotes: 0

Oscar Ruiz
Oscar Ruiz

Reputation: 21

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

Upvotes: 2

Marco Luly
Marco Luly

Reputation: 403

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."

Upvotes: 4

Meenakshi Sharma
Meenakshi Sharma

Reputation: 13

Remove the service from your provider list. I had the same issue and was resolved when I did that.

Upvotes: 1

afeef
afeef

Reputation: 4716

You need to comment

@Injectable() in your routing or injecting else

Example

//   @Injectable()  comment this code

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

Upvotes: 1

Related Questions