Spinner icon does not display for angular v15.2.0

[joshualburke]

Running ngx-spinner works for v15.0.1 but does not for v15.2.0. The icon is not displayed.

[joshualburke]

This is the output of package.json that works: { "name": "test", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^15.0.1", "@angular/common": "^15.0.1", "@angular/compiler": "^15.0.1", "@angular/core": "^15.0.1", "@angular/forms": "^15.0.1", "@angular/platform-browser": "^15.0.1", "@angular/platform-browser-dynamic": "^15.0.1", "@angular/router": "^15.0.1", "ngx-spinner": "^15.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.0.1", "@angular/cli": "~15.0.1", "@angular/compiler-cli": "^15.0.1", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.9.4" } }

Here is the output of package.json that is causing the spinner to not show: { "name": "test", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^15.2.0", "@angular/common": "^15.2.0", "@angular/compiler": "^15.2.0", "@angular/core": "^15.2.0", "@angular/forms": "^15.2.0", "@angular/platform-browser": "^15.2.0", "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.0", "@angular/cli": "~15.2.0", "@angular/compiler-cli": "^15.2.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.9.4" } }

[tapvirvirk]

Any update on this issue?

[tapvirvirk]

Icon is not even showing on angular 16.

[Sparkmb21]

same issue on the Angular 14

[Napster2210]

@joshualburke @tapvirvirk @Sparkmb21 @frsimond Have you guys added css file in angular.json file as mentioned in the README: https://github.com/Napster2210/ngx-spinner#usage

[Napster2210]

Latest version v16 is now available.

[joshualburke]

@joshualburke @tapvirvirk @Sparkmb21 @frsimond Have you guys added css file in angular.json file as mentioned in the README: https://github.com/Napster2210/ngx-spinner#usage

I did try that. It didn't work. I ended up going a different direction. Unfortunately, I didn't have time to spend figuring out what the issue was (although it appears that the @angular/animations package referenced in your app is somehow causing this issue. It is creating a conflict with the users app version).

[tapvirvirk]

@Napster2210 After specifying the css and the type, it's working with ngx-angular16

[tapvirvirk]

Also, when I am installing ngx-spinner, it is throwing me an error `npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: horizon-frontend@0.0.0 npm ERR! Found: @angular/common@16.0.2 npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^16.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@"^15.0.0" from ngx-spinner@16.0.0 npm ERR! node_modules/ngx-spinner npm ERR! ngx-spinner@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/t935638/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/t935638/.npm/_logs/2023-05-23T20_46_09_127Z-debug-0.log`

[Napster2210]

@tapvirvirk There is new version available v16.0.2. Can you please check the above issue with the latest version?

[tapvirvirk]

Yes, its working. Thanks

[PouryaMontakhab]

same issue with angular 16

[Napster2210]

@PouryaMontakhab Can you please replicate the issue in Stackblitz or Code Sandbox and share the url here?

[dupiesdupreez]

Also had this issue, solved it with adding the style.

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

 imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),
    NgxSpinnerModule.forRoot({ type: 'square-jelly-box' }),
  ],

[miskozajac]

Why is this issue closed? those animations from load awesome are not working