Angular问题：向非独立组件注入服务导致应用异常

问题出在这两个关键地方：

1. 未导入HttpClientModule：你的ApiService依赖HttpClient，但AppModule的imports数组里没添加这个模块，导致依赖注入失败，Angular渲染到<app-news>时中断，后续内容无法正常渲染，且因开发模式特性未弹出显式报错。
2. 服务重复注册：ApiService已经通过@Injectable({ providedIn: 'root' })声明为根级可注入服务，你又在AppModule的providers数组中重复添加了ApiService，会造成服务实例冲突，是潜在的异常诱因。

具体修复步骤 #

1. 给AppModule添加HttpClientModule #

修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 新增导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MailinglistComponent } from './mailinglist/mailinglist.component';
import { NewsComponent } from './news/news.component';
// 移除ApiService的导入，无需重复引入
// import { ApiService } from './api.service';

@NgModule({
  declarations: [
    AppComponent,
    MailinglistComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // 将该模块加入imports数组
  ],
  providers: [
    // 移除此处的ApiService，避免重复注册
    // ApiService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 检查NewsComponent的模板 #

确认news.component.html无语法错误（比如未闭合标签），如果当前为空模板，可先添加测试内容验证：

<p>新闻组件加载正常！</p>

3. 重启开发服务器 #

Angular热重载可能无法完全识别模块导入的变更，停止当前ng serve进程，重新执行启动命令。

完成上述操作后，重新在NewsComponent中注入ApiService，<app-news>之后的页面内容即可正常显示。

内容的提问来源于stack exchange，提问作者commadelimited