Search code examples
angularanimate.css

@import "../node_modules/animate.css/animate.min.css"; not working in Angular 17+

if i use @import "../node_modules/animate.css/animate.min.css";

in my styles.scss I encounter the following Error:

X [ERROR] Could not resolve "../node_modules/animate.css/animate.min.css" [plugin angular-compiler]

"dependencies": {
    "@angular/animations": "^17.2.3",
    "@angular/common": "^17.2.3",
    "@angular/compiler": "^17.2.3",
    "@angular/core": "^17.2.3",
    "@angular/forms": "^17.2.3",
    "@angular/material": "^17.2.1",
    "@angular/platform-browser": "^17.2.3",
    "@angular/platform-browser-dynamic": "^17.2.3",
    "@angular/platform-server": "^17.2.3",
    "@angular/router": "^17.2.3",
    "@angular/ssr": "^17.2.1",
    "animate.css": "^4.1.1",
    "express": "^4.18.2",
    "http-proxy-middleware": "^2.0.6",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.14.4"
  },

I sucessfully installed animate.css as you can see in my dependencies.

I included

            "styles": [
              "src/styles.scss",
              "node_modules/animate.css/animate.min.css"
            ],

I tried

@import '~animate.css/animate.min';

I also tried to import per link href in my index.html

None of those work for me

Solution

  • After

    npm i animate.css

    In Angular.json

    "styles": [
          "src/global_styles.css",
          "node_modules/animate.css/animate.min.css"
         ]

    OR

    In global_styles.css

    @import "animate.css";

    To check, simply in .html

    <h1 class="animate__animated animate__bounceOutLeft">Hello World!</h1>

    NOTE: Always we change the angular.json or install a new npm package, we need re-start the server.