Angular v18 support

[NrujalSharma]

Is your feature request related to a problem? Please describe.
For us relying on ngx-spinner and want to upgrade our Angular apps to Angular 18 it's not possible at the moment.

Describe the solution you'd like
ngx-spinner support for Angular 18

[NrujalSharma]

@Napster2210 Any update on this?

[dahool]

version 17 works just fine with Angular 18

[Napster2210]

@NrujalSharma Have you checked with ngx-spinner v17 ?

[phken91]

if you are using angular 18 + standalone component, remember to add the provideAnimations into [project].config.ts.

ps: just implement this to my angular 18 project

[alexandreomiranda]

@phken91 I'd appreciate if you could share how you did it. I couldn't make it work for a brand new angular app.
I'm on Angular 18.1.0, ngx-spinner 17.0.0

app.config.ts

export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true }),
        provideRouter(routes),
        provideAnimationsAsync(),
        importProvidersFrom(NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' }))
    ]
};

angular.json

"styles": [
    "src/styles.scss",
    "node_modules/ngx-spinner/animations/ball-scale-multiple.css"
],

app.component.ts

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    template: `
    <ngx-spinner type="ball-scale-multiple"></ngx-spinner>
    <router-outlet />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements OnInit {
    
    spinner = inject(NgxSpinnerService);

    ngOnInit() {
        this.spinner.show();

        setTimeout(() => {
            this.spinner.hide();
        }, 5000);
    }
}

What am I missing?

[alexandreomiranda]

@phken91 I'd appreciate if you could share how you did it. I couldn't make it work for a brand new angular app. I'm on Angular 18.1.0, ngx-spinner 17.0.0

app.config.ts

export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true }),
        provideRouter(routes),
        provideAnimationsAsync(),
        importProvidersFrom(NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' }))
    ]
};

angular.json

"styles": [
    "src/styles.scss",
    "node_modules/ngx-spinner/animations/ball-scale-multiple.css"
],

app.component.ts

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    template: `
    <ngx-spinner type="ball-scale-multiple"></ngx-spinner>
    <router-outlet />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements OnInit {
    
    spinner = inject(NgxSpinnerService);

    ngOnInit() {
        this.spinner.show();

        setTimeout(() => {
            this.spinner.hide();
        }, 5000);
    }
}

What am I missing?

I know what I am missing. It's working now:

in my app component, I just needed to import NgxSpinnerComponent
here is the correct version:

import { Component, inject, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxSpinnerService, NgxSpinnerComponent } from 'ngx-spinner';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, NgxSpinnerComponent],
    template: `
    <ngx-spinner type="ball-scale-multiple"></ngx-spinner>
    <router-outlet />
    `,
})
export class AppComponent implements OnInit {
    
    spinner = inject(NgxSpinnerService);

    ngOnInit() {
        this.spinner.show();

        setTimeout(() => {
            this.spinner.hide();
        }, 5000);
    }
}