Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

NGX-Spinner CSS Missing From angular.json #11222


User avatar
1
rickfrankel created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version? 11.3.1
  • What is your product type (Angular or MVC)?
  • Angular
  • What is product framework type (.net framework or .net core)?
  • .Net Core

I noticed that the spinner annimation was missing in the newest version.

It would appear that you need to add "node_modules/ngx-spinner/animations/ball-clip-rotate.css",

To the angular.json file as per the instructions here https://github.com/Napster2210/ngx-spinner#usage

I added it to mine and the spinner works again.

Thanks Rick


3 Answer(s)
  • User Avatar
    0
    m.aliozkaya created
    Support Team

    Hello @rickfrankel

    Spinner running on loading screen without this css file. Could you give more information about your issue?

  • User Avatar
    1
    rickfrankel created

    Ahh sorry it's my bad kinda.

    I've upgraded ngx-spinner to "ngx-spinner": "^13.1.1",

    As a result you need to include the css class in the angular.json for the animation to work. Looks like in the included package of version 12 this was automatic in some way.

    More for anyone else's reference and for when you update the ngx-spinner dependency in the base package.

    Thanks Rick

  • User Avatar
    0
    alexanderpilhar created

    This is true for ASPNETZERO 12.0.0 (Angular)!

    How to reproduce: Start the spinner in any component that extends AppComponentBase without stopping it: this.spinnerService.show(). You will see the dark overlay but no blue circle spinning around.

    How to solve: As already stated by @rickfrankel in the comment above, in angular.json add node_modules/ngx-spinner/animations/ball-clip-rotate.css to styles section:

    "styles": [
        ...,
        "node_modules/ngx-spinner/animations/ball-clip-rotate.css"
    ]