Angular 1迁移Angular 15遇NullInjectorError，页面空白求助

出现NullInjectorError: R3InjectorError(AppModule)[MessageService -> MessageService -> MessageService]错误，核心原因是Angular依赖注入容器找不到MessageService的提供者——Angular1和Angular15的服务注册机制完全不同，旧代码的注册方式在Angular15中不生效。

具体解决步骤： #

1. 修正MessageService的@Injectable配置
   打开message.service.ts，确保服务类使用Angular15的注入装饰器配置：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root' // 根级别注入，整个应用可直接使用
   })
   export class MessageService {
     // 原服务逻辑代码
   }
   

   也可以指定注入到AppModule：providedIn: AppModule，但providedIn: 'root'是Angular推荐的方式。

2. 如果未使用providedIn，手动在AppModule注册服务
   打开App.module.ts，在@NgModule的providers数组中添加MessageService：

   import { MessageService } from './路径/message.service';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [/* 你的导入模块 */],
     providers: [MessageService], // 注册服务
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 检查组件中的注入正确性
   打开app.component.ts，确认服务引入路径正确、构造函数注入语法无误：

   import { MessageService } from './路径/message.service';
   
   export class AppComponent {
     constructor(private messageService: MessageService) { }
   }
   

   注意类名拼写、文件路径要和服务文件完全匹配。

4. 清理缓存并重新构建
   执行以下命令清理缓存后重启项目：

   ng clean
   ng serve
   

补充说明： #

Angular1中服务通过module.service()/module.factory()注册，而Angular2+依赖注入需要通过@Injectable装饰器的providedIn属性，或模块的providers数组显式声明服务的提供者，否则注入容器无法创建服务实例，最终导致页面因依赖缺失无法渲染而空白。

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