Spinner not showing during network request with Angular 17

[JamesIde]

Expected behavior

Spinner is shown when making get request to jsonplaceholder API

Actual behavior

No spinner is shown when making get request to jsonplaceholder API.

Steps to reproduce

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NgHttpLoaderModule],
  template: `
    <div>
      <h1>Hello World</h1>
      {{ todo.title }}
    </div>

    <ng-http-loader
      [backdropBackgroundColor]="'#000000'"
      spinner="sk-double-bounce"
    ></ng-http-loader>
  `,
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  todo: Todo = {} as Todo;

  ngOnInit(): void {
    this.http
      .get<Todo>('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe((res) => {
        this.todo = res;
        console.log(this.todo);
      });
  }

  title = 'test-angular-http-loader';
}

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { NgHttpLoaderModule } from 'ng-http-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(NgHttpLoaderModule.forRoot()),
  ],
};

ng-http-loader version

All angular dependencies 17.0.0 "ng-http-loader": "^15.0.0",

It does not work as expected on Internet explorer or Safari

It is not working as expected on any browser - no spinner is shown. What am I doing wrong here? Note - I have to add NgHttpLoaderModule to the imports array inside app.component.ts to resolve this error:

1. If 'ng-http-loader' is an Angular component, then verify that it is included in the '@Component.imports' of this component.```

I throttle to slow 3g in network monitor to see if that makes a difference as that will make the request take a few seconds, still nothing. Side note - documentation could be improved to show how it should be set up with standalone modules as bootstrapping the application has slightly changed in terms of handling providers. 

[mpalourdio]

Hello, not able to test for now, but I suspect you have to provide the interceptors

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptorsFromDi()
    ),
    importProvidersFrom(NgHttpLoaderModule.forRoot()),
  ],
};

[mpalourdio]

Tested with withInterceptorsFromDi and works as expected. README updated. Thanks for feedback!

[mpalourdio]

https://github.com/mpalourdio/ng-http-loader#standalone-components

[JamesIde]

Thanks @mpalourdio.. legend