[SOLVED] Angular Standalone Component (using LoadComponent)- Lazy Loading Service not Working

Angular Standalone Component (using LoadComponent)- Lazy Loading Service not Working

The service is not working in the components. and have no error on the console. keep the component keep on loading. when I remove the service from component it start working fine. there is some issue in the lazy laod of service in the lazy load component. please help.

my service is Timingscreen.service.ts file

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

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

my routing file is

export const routes: Routes = [
{
    path: 'timingscreen',
    loadComponent: () => import('./screens/timingscreen/timingscreen.component').then(c => c.TimingscreenComponent),
    title: 'Timing screen',
}]

and my component timingscreen.component.ts

import { Component, Inject, OnDestroy, OnInit, effect, inject } from '@angular/core';
import { TimingscreenService } from '../../services/timingscreen.service';
        @Component({
      selector: 'app-timingscreen',
      standalone: true,
      imports: [],
      providers: [TimingscreenService],
      templateUrl: './timingscreen.component.html',
      styleUrl: './timingscreen.component.scss'
    })
    export class TimingscreenComponent implements OnInit, OnDestroy {
    private timingService = inject(TimingscreenService)
    }

Solution