Angular独立组件（LoadComponent）懒加载服务失效问题求助

问题场景 #

通过loadComponent实现Angular独立组件懒加载时，只要组件中注入TimingscreenService，组件就会一直处于加载状态，控制台无任何报错信息；移除该服务依赖后，组件可正常渲染。

解决方案 #

移除组件元数据中providers数组里的TimingscreenService配置：

修改后的timingscreen.component.ts代码：

import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { TimingscreenService } from '../../services/timingscreen.service';

@Component({
  selector: 'app-timingscreen',
  standalone: true,
  imports: [],
  // 移除组件级的服务声明
  templateUrl: './timingscreen.component.html',
  styleUrl: './timingscreen.component.scss'
})
export class TimingscreenComponent implements OnInit, OnDestroy {
  private timingService = inject(TimingscreenService);
}

原因分析 #

你的TimingscreenService已经通过@Injectable({ providedIn: 'root' })注册为根注入器的单例服务，此时在独立组件的providers数组中再次声明该服务，会触发Angular依赖注入的循环加载死锁：

• 懒加载组件需要创建自身注入器来实例化服务
• 但根注入器中已经存在该服务的单例实例，组件级注入器尝试创建新实例时，与懒加载的组件加载流程产生冲突
• 这种内部依赖解析的死锁不会抛出控制台可见的错误，只会导致组件一直卡在加载状态

如果确实需要为该组件提供独立的服务实例，可以修改服务的providedIn配置为'any'，或者在服务上使用@Injectable({ providedIn: 'component' })，但大多数业务场景下，根级单例服务已经满足需求。

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