2

Here is where I implement the spinner properties.And in the console from Chrome I receive this error:[ngx-spinner]: Property "type" is missed. Please, provide animation type to component and ensure css is added to angular.json file

export class BusyService {
busyRequestCount = 0; 

constructor(private spinnerService: NgxSpinnerService) { }

busy(){
this.busyRequestCount++;
this.spinnerService.show(undefined, {
  type: 'pacman',
  bdColor: 'rgba(255,255,255,0)',
  color: '#333333'
})
}

 idle(){
this.busyRequestCount--;
if(this.busyRequestCount <= 0){
  this.busyRequestCount = 0;
  this.spinnerService.hide();
}
}

And here is the angular.json

"styles": [
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/font-awesome/css/font-awesome.css",
          "./node_modules/bootswatch/dist/united/bootstrap.css",
          "./node_modules/ngx-toastr/toastr.css",
          "./node_modules/ngx-spinner/spinner.css",
          "src/styles.css"
        ],
Alejandro V
  • 39
  • 1
  • 4

3 Answers3

8

I faced the same issue, after my upgrading my repository to Angular 14 version and I have fixed this as following changes.

Need to add type="ball-scale-multiple" as below.

<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

Before it was just

<ngx-spinner></ngx-spinner>

and the above type what you included, you need to add to angular.json file

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

This fix solved for me.

vishnu karthik Reddy
  • 164
  • 1
  • 4
  • 14
2

You just need to add the "type" attribute into the ngx-spinner component in your template, like so:

<ngx-spinner type="pacman">
    <p>Loading...</p>
</ngx-spinner>
Ali Jamal
  • 619
  • 7
  • 12
0

In angular.json file you've to add like this(below in code) & please look at node_modules>ngx-spinner>animations in which loading type you want to add as your indicator

"styles": [
          "./node_modules/ngx-spinner/animations/line-scale-party.css"
        ],
aamir_rohan
  • 31
  • 3