添加含Service的构造函数后Angular应用显示空白页求助

你的SharedInfoService仅添加了@Injectable()装饰器，但未配置服务的注入范围，Angular无法解析该服务的依赖关系，导致组件注入服务时抛出错误，最终页面无法正常渲染（显示空白）。

解决方法 #

方法一：使用providedIn配置根注入器（推荐） #

修改shared-info.service.ts，在@Injectable装饰器中添加providedIn: 'root'，让服务成为根注入器的单例：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedInfoService {
  constructor() {}

  public name = 'Darth Vader';
}

方法二：在模块的providers数组中注册服务 #

打开app.module.ts，将SharedInfoService添加到模块的providers数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedInfoService } from './shared-info.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [SharedInfoService],
  bootstrap: [AppComponent]
})
export class AppModule {}

第一种方式是Angular官方推荐的做法，它会自动进行树摇优化，避免未使用的服务被打包；第二种是传统的模块级注册方式，适用于需要在特定模块范围内提供服务的场景。

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