CODEWITHSUNDEEP
angular
RIni
RIni

Reputation: 179

Uncaught TypeError: Cannot read property 'id' of undefined in Http services in console in angular?

I am using http services in angular I am having a constructor as :

    import { HttpClientModule,HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

  posts:any[];

  constructor( private http:HttpClient) {
   http.get('http://jsonplaceholder.typicode.com/posts').
    subscribe(response=>{
      this.posts=<any>response;

    })
   }

  ngOnInit(): void {
  }



}

HTml part:

<ul class="list-group">
    <li *ngFor="let post of posts" class="list-group-item">{{post.title}}</li>
</ul>

BUt in console i am gettin error as "Uncaught TypeError: Cannot read property 'id' of undefined".TRied with several ways but still getting this error.

app.module.ts

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

import { interval } from 'rxjs';
import {NgForm, FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Block1Component } from './block1/block1.component';
import { Block2Component } from './block2/block2.component';
import { HomeComponent } from './home/home.component';

import { PostsComponent } from './posts/posts.component';
import { HttpClientModule,HttpClient } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    Block1Component,
    Block2Component,
    HomeComponent,

    PostsComponent
  ],
  imports: [
    BrowserModule,
    HttpClient,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App module is added.The issue is i am getting the error again as 

core.js:35929 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:35929)
    at core.js:35947
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:35943)
    at new NgModuleFactory$1 (core.js:36105)
    at compileNgModuleFactory__POST_R3__ (core.js:41895)
    at PlatformRef.bootstrapModule (core.js:42260)
    at Module../src/main.ts (main.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:13)

Upvotes: 2

Views: 6510

Answers (4)

user29001979
user29001979

Reputation: 1

this might have been caused by any DEPRECATED imports in the app.module that can be identified by running "ng serve --prod" which will show the error .

https://stackoverflow.com/questions/60264933 this is the similar issue.

Upvotes: 0

Igor Kurkov
Igor Kurkov

Reputation: 5101

in 2021 on 8 angular I faced this issue, just removed node_modules and reinstalled it - issue was solved. so:

rm -rf node_modules
npm install

It possibly causes by ngcc error inside compiler lib if you have different angular/cli locally in work folder and globally.

Upvotes: 0

JWP
JWP

Reputation: 6963

This happens in Angular.core.js when modules are loaded. I wrote a bug on this because the failed module should be called out to the user but isn't.

If you put a breakpoint on this statement you can at least know the missing module.

//packages/core/src/linker/ng_module_factory_registration.ts

export function registerNgModuleType(ngModuleType: NgModuleType) {
 // If id emod is undefined an error is thrown.
 if (ngModuleType.ɵmod.id !== null) {  <= Set Break point here.

Upvotes: 1

Rafa
Rafa

Reputation: 61

This often happens when you've mixed up imports and declarations in the pertinent module (or some other such mix-up). You might for example have put a component in the imports array, where only modules should be 'declared'. The component should be in the declarations array.

Upvotes: 2

Related Questions