开发者问题收集

未捕获的类型错误:无法在角度控制台中读取 Http 服务中未定义的属性“id”?

2020-03-24
6431

我在 angular 中使用 http 服务 我有一个构造函数:

    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 部分:

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

但是在控制台中我收到错误 “未捕获 TypeError:无法读取未定义的属性‘id’”。尝试了几种方法但仍然收到此错误。

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 { }

已添加应用模块。问题是我再次收到错误

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)
3个回答

这种情况经常发生在您在相关模块中混淆了导入和声明(或其他类似的混淆)时。例如,您可能将组件放在导入数组中,而该数组中只应“声明”模块。组件应位于声明数组中。

Rafa
2020-06-27

加载模块时,Angular.core.js 中会发生这种情况。我为此写了个 bug,因为失败的模块应该被用户注意到 但事实并非如此

如果您在此语句上设置断点,您至少可以知道缺少的模块。

//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.
JWP
2020-06-27

在 2021 年的 8 angular 上我遇到了这个问题,只需删除 node_modules 并重新安装它 - 问题就解决了。 所以:

rm -rf node_modules
npm install

如果工作文件夹中本地和全局的 angular/cli 不同,则可能是由编译器库中的 ngcc 错误引起的。

Igor Kurkov
2021-05-19