未捕获的类型错误:无法在角度控制台中读取 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