After Upgrade to Angular 17 loader not working which added in app.component.html file about angular

[JoostK]

What is a custom loader? I have no clue what this issue is about. Could you please provide a minimal, runnable reproduction to show the problem you're having, otherwise this isn't actionable to us.

[tejasmaven]

loading.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { LoaderService } from '../../service';
import { Subscription } from 'rxjs';
import { LoaderState } from '../../models/loader.model'
import { CommonModule } from '@angular/common';
@Component({
  selector: 'loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.css'],
  standalone: true,
  imports: [CommonModule],
  providers:[LoaderService]
})
export class LoadingComponent implements OnInit, OnDestroy {
  show = false;
  subscription: Subscription;
  constructor(private loaderSvc: LoaderService) { }

  ngOnInit() {
    this.subscription = this.loaderSvc.loaderState.subscribe((state: LoaderState) => {
      this.show = state.show; //setTimeout(() => this.show = state.show);
    })
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

loading.component.html

<div *ngIf="show"
  style="position: fixed; top: 0; left: 0; z-index: 1111; background: rgba(0,0,0,0.1); height: 100%; width: 100%;">
  <div class="loader-overlay" style="position: relative; top: 45vh;">
    <div class="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
  </div>
</div>

app.component.html

<loading></loading>
<router-outlet></router-outlet>

app.component.ts

import { AfterViewInit, Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
import { LoadingComponent } from './shared/components';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [RouterModule, NgIdleKeepaliveModule, LoadingComponent],
  providers: [{ provide: WINDOW, useValue: {} }]
  
   constructor(public loaderSVC: LoaderService){}
   
   ngOnInit() {
    this.router.events.subscribe((evt) => {
      this.loaderSVC.startLoading();
      // console.log("start")
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      setTimeout(() => {
        this.loaderSVC.stopLoading();
        // console.log("stop")
      });
})

loader.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { LoaderState } from '../models/loader.model';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();
  constructor() { }

  startLoading() {            
    this.loaderSubject.next(<LoaderState>{show: true});
  }

  stopLoading() {
    this.loaderSubject.next(<LoaderState>{show: false});
  }
}

progress.interceptor.ts

import {Injectable} from '@angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/finally';
import { LoaderService } from '../service';

@Injectable()
export class ProgressInterceptor implements HttpInterceptor {
    constructor(private loaderSvc: LoaderService) {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (request.params.has('ignoreLoadingBar')) {
            return next.handle(request.clone({ headers: request.headers.delete('ignoreLoadingBar') }));
          }
            this.loaderSvc.startLoading();
            return next.handle(request).finally(() => this.loaderSvc.stopLoading());
    }
}

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import './icons';
import { environment } from './environments/environment';
import { AppComponent } from '@app/app.component';
import { appConfig } from '@app/app.config.server';
import { bootstrapApplication } from '@angular/platform-browser';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

app.config.server.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import './icons';
import { environment } from './environments/environment';
import { AppComponent } from '@app/app.component';
import { appConfig } from '@app/app.config.server';
import { bootstrapApplication } from '@angular/platform-browser';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

This is code of my project. Now loader will have to work in every API call because of interceptor. but after upgrading to angular 17 is it not working. can you please help me to understand where is the problem?

[JoostK]

If I understand correctly this stopped working when converting to standalone, not as a direct result of updating to Angular 17. I don't see the interceptor being registered anywhere, which is required for it to work.

---

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[tejasmaven]

Yes correct, after converting a standalone loader has stopped working. I've registered interceptor in app.config.server.ts file. please have a look.
`import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './routes/routes';
import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { provideAnimations } from '@angular/platform-browser/animations';
import { CookieService } from 'ngx-cookie-service';
import { provideNgxMask } from 'ngx-mask';
import { provideToastr } from 'ngx-toastr';
import { ProgressInterceptor, BasicAuthInterceptor } from './shared/helpers';
import { StorageService } from './shared/service';

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideClientHydration(withHttpTransferCacheOptions({
includePostRequests: true
})), provideNgxMask(), {
provide: HTTP_INTERCEPTORS,
useClass: ProgressInterceptor,
multi: true
}, {
provide: HTTP_INTERCEPTORS,
useClass: BasicAuthInterceptor,
multi: true
}, provideAnimations(),
CookieService, StorageService, provideToastr({ positionClass: 'toast-top-right' }),
importProvidersFrom(ReactiveFormsModule, HttpClientModule),]
};`