Napster2210 / ngx-spinner

A library for loading spinner for Angular 4 - 17.
https://napster2210.github.io/ngx-spinner/
MIT License
823 stars 138 forks source link

Angular v17 support #270

Closed Mr-Vinti closed 5 months ago

Mr-Vinti commented 11 months ago

Angular recently launched v17. Any plans on supporting the new version?

Napster2210 commented 11 months ago

Yes, it will be there is this month itself.

Tweniee commented 11 months ago

i can do it @Napster2210

diamond97dev commented 11 months ago

@Tweniee, can you help me to solve ngx spinner issue? I can see only loaidng... not svg spinner

Tweniee commented 11 months ago

@diamond97dev sure, tell me how can help you.

diamond97dev commented 11 months ago

issue was that I used not matched css in angular json. I tested ngx-spinner in my angular latest version 17.0.4, and all was good.

diamond97dev commented 11 months ago

thanks for reply, I already fixed the issue.

On Thu, Nov 30, 2023 at 2:48 PM Abhishek Upadhyay @.***> wrote:

@diamond97dev https://github.com/diamond97dev sure, tell me how can help you.

— Reply to this email directly, view it on GitHub https://github.com/Napster2210/ngx-spinner/issues/270#issuecomment-1833720742, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBQLDTERMADA3HSVGURET6TYHB6ARAVCNFSM6AAAAAA7U4QSKGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZTG4ZDANZUGI . You are receiving this because you were mentioned.Message ID: @.***>

kirandeepkaur13 commented 11 months ago

Yes, it will be there is this month itself.

@Napster2210, any updates ?

Napster2210 commented 11 months ago

@kirandeepkaur13 Yes, it will be released in this month.

alimirdeveloper commented 10 months ago

its ok on angular 17 , you have to use below version of angular material "@angular/cdk": "^16.2.12", "@angular/material": "^16.2.12", "ngx-spinner": "~16.0.2",

krisbijan commented 10 months ago

Hi @Napster2210 ,

any progress? This is only library that is holding me back from migrating to angular 17.

Thanks

mrmercc commented 9 months ago

The current version of the library works fine with Angular v17 app. Just provide animationsAsync in app.config.ts (in case if your app is standalone) and import related services/modules.

image

And call it in your component;

image

and voila

sebastianhaberey commented 9 months ago

Works for me with Angular Material 17.0.3

Mr-Vinti commented 9 months ago

@sebastianhaberey can you provide your package.json content, please?

sebastianhaberey commented 9 months ago
Here you go - nothing special ```json { "name": "foo", "version": "1.0.0", "scripts": { }, "private": true, "dependencies": { "@angular/animations": "17.0.6", "@angular/cdk": "17.0.3", "@angular/common": "17.0.6", "@angular/compiler": "17.0.6", "@angular/core": "17.0.6", "@angular/forms": "17.0.6", "@angular/material": "17.0.3", "@angular/material-date-fns-adapter": "17.0.3", "@angular/platform-browser": "17.0.6", "@angular/platform-browser-dynamic": "17.0.6", "@angular/router": "17.0.6", "@fontsource/material-icons-outlined": "^5.0.11", "@fontsource/montserrat": "^5.0.16", "@fontsource/roboto": "^5.0.8", "@ngrx/effects": "17.0.1", "@ngrx/store": "17.0.1", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@nx/angular": "17.2.8", "angular-material-contrast-fix": "^17.2.1", "cropperjs": "^1.6.1", "currency.js": "^2.0.4", "date-fns": "^2.30.0", "keycloak-angular": "^15.0.0", "keycloak-js": "^22.0.5", "ngx-spinner": "^16.0.2", "ngx-toastr": "^18.0.0", "rxjs": "~7.8.1", "tslib": "^2.3.0", "zone.js": "0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "17.0.6", "@angular-devkit/core": "17.0.6", "@angular-devkit/schematics": "17.0.6", "@angular-eslint/eslint-plugin": "17.1.1", "@angular-eslint/eslint-plugin-template": "17.1.1", "@angular-eslint/template-parser": "17.1.1", "@angular/cli": "~17.0.0", "@angular/compiler-cli": "17.0.6", "@angular/language-service": "17.0.6", "@nx/cypress": "17.2.8", "@nx/eslint": "17.2.8", "@nx/eslint-plugin": "17.2.8", "@nx/jest": "17.2.8", "@nx/js": "17.2.8", "@nx/web": "17.2.8", "@nx/workspace": "17.2.8", "@schematics/angular": "17.0.6", "@swc-node/register": "1.6.8", "@swc/core": "1.3.102", "@types/jest": "^29.5.11", "@types/node": "20.10.7", "@typescript-eslint/eslint-plugin": "6.18.1", "@typescript-eslint/parser": "6.18.1", "autoprefixer": "^10.4.0", "cypress": "^13.6.2", "eslint": "8.56.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-cypress": "2.15.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jest-preset-angular": "13.1.5", "ng-packagr": "17.0.3", "nx": "17.2.8", "postcss": "^8.4.33", "postcss-import": "~16.0.0", "postcss-preset-env": "~9.3.0", "postcss-url": "~10.1.3", "prettier": "^3.1.1", "source-map-explorer": "^2.5.3", "tailwindcss": "^3.4.1", "ts-jest": "29.1.1", "ts-node": "10.9.2", "typescript": "5.2.2" } } ```
Mr-Vinti commented 9 months ago

Thanks for sharing, Sebastian! It looks like i was also able to run an install with the latest versions of angular. That's weird because ngx-spinner was throwing me an error before that it needed a version up to angular 16

``` "dependencies": { "@angular/animations": "^17.1.0", "@angular/cdk": "^17.1.0", "@angular/common": "^17.1.0", "@angular/compiler": "^17.1.0", "@angular/core": "^17.1.0", "@angular/forms": "^17.1.0", "@angular/material": "^17.1.0", "@angular/material-luxon-adapter": "^17.1.0", "@angular/platform-browser": "^17.1.0", "@angular/platform-browser-dynamic": "^17.1.0", "@angular/router": "^17.1.0", "@azure/msal-angular": "^3.0.10", "@azure/msal-browser": "^3.7.0", "file-saver-es": "^2.0.5", "luxon": "^3.4.4", "ngx-flexible-layout": "^17.0.4", "ngx-scrollbar": "^13.0.3", "ngx-spinner": "^16.0.2", "rxjs": "~7.8.0", "swiper": "^11.0.5", "tslib": "^2.6.2", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.1.0", "@angular/cli": "~17.1.0", "@angular/compiler-cli": "^17.1.0", "@types/file-saver-es": "^2.0.3", "@types/jasmine": "~5.1.4", "@types/luxon": "^3.4.1", "jasmine-core": "~5.1.1", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.3.3" } ```
adolfox commented 9 months ago

@Napster2210
Just following up on when 17 will be available? It's not working for me on Angular 17. The overlay comes up and it displays the text in small size, but the animations don't show up. I can show and hide the overlay, just the animations not showing.

adolfox commented 9 months ago

For some additional context, below is the reason why I had to updated to Angular 17. There's a high severity vuln. in 16 that hasn't been fixed.

image

JimLixin commented 9 months ago

Any updates on Angular 17 support? It's already two months since the release.

hectorgaticacl commented 8 months ago

@Napster2210 Just following up on when 17 will be available? It's not working for me on Angular 17. The overlay comes up and it displays the text in small size, but the animations don't show up. I can show and hide the overlay, just the animations not showing.

Same issue here ! . Angular v17. No animation , just text and overlay !

ancantos99 commented 8 months ago

Ngx-Spinner 16.0.2 si funciona en angular 17

  1. hay que agregar provideAnimations() en el ApplicationConfig (app.config.ts)
  2. en los imports del componente hay que agregar: imports: [CommonModule, NgxSpinnerModule]
  3. En el archivo angular.json agregar el css "styles": [ ... "node_modules/ngx-spinner/animations/timer.css", "src/styles.css" ],
denhaandrei commented 7 months ago
<ngx-spinner fullScreen="false" type="ball-spin-clockwise"
             size="medium" color="#5CC87A" bdColor="transparent">

found fix, you should add your animations manually to angular.json:

 "architect": {
     "build": {
         ...
         "options": {
           ...
             "styles": [
                 "node_modules/ngx-spinner/animations/ball-spin-clockwise.css",
                 "src/styles.css"
             ],
...
kavindarlm commented 6 months ago

@Tweniee, can you help me to solve ngx spinner issue? I can see only loaidng... not svg spinner

i have the same issue

Tweniee commented 6 months ago

Sure

canhuynh1998 commented 6 months ago

Not sure about the progress of this but @mrmercc solution works for me

mrmercc commented 6 months ago

Not sure about the progress of this but @mrmercc solution works for me

If it works, don't touch it :))

JK-404 commented 6 months ago

I can confirm with the above guidance from @mrmercc and the hint from @denhaandrei to import the animations it works fine for me with Angular 17.3.1

yamuna83 commented 6 months ago

I tried both options and it is not showing the overlay/text/image.

AppConfig:

image

Package.json:

image

AppComponent.html:

image

AppComponent.ts:

image

Angular.json:

image

yamuna83 commented 6 months ago

I found the issue and fixed it. Thanks @mrmercc , the solution you proposed works for me. Any my issue is I specified name of the spinner in html and missed in the show and hide method. So I fixed that by this.spinnerService.show("pageSpinner");

Napster2210 commented 5 months ago

V17 is now available: https://www.npmjs.com/package/ngx-spinner/v/17.0.0

Mr-Vinti commented 5 months ago

Hello,

Thank you for bumping the version. I have validated that the new version is working perfectly.