Angular 5中ngx-wow无法正常运行求助

Hey there, let's work through getting ngx-wow up and running in your Angular 5 project. From what you described, there are a couple of common missteps that might be causing the issue—let's break them down and fix things step by step:

1. Fix the Animate.css Path & Package Name #

First, you mentioned adding ../node_modules/animated.css/animate.css to your styles array, but there's a typo here: the correct package name is animate.css (not animated.css). On top of that, double-check the relative path: if your angular-cli.json is in your project root (same level as node_modules), you don't need the ../ prefix (it would look for node_modules one directory above your project, which doesn't exist).

Your corrected styles path should be:

"./node_modules/animate.css/animate.css"

2. Verify Wow.js Script Path #

Same logic applies to the wow.js script in your scripts array. The correct path (for a root-level angular-cli.json) is:

"./node_modules/wowjs/dist/wow.js"

You can even simplify it to "node_modules/wowjs/dist/wow.js"—Angular CLI will resolve it correctly.

3. Properly Import & Initialize ngx-wow in Your Angular App #

It sounds like you might have missed a couple of key Angular-specific steps:

Step 3.1: Import the Module in Your Root AppModule #

Open app.module.ts and add the NgwWowModule to your imports, using forRoot() to set it up globally:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgwWowModule } from 'ngx-wow'; // Import the module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgwWowModule.forRoot() // Add this line to initialize the module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3.2: Initialize the Wow Service in Your Component #

In the component where you want to use animations (or your root AppComponent), inject the WowService and call init() in the constructor:

import { Component } from '@angular/core';
import { WowService } from 'ngx-wow'; // Import the service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private wowService: WowService) {
    this.wowService.init(); // Trigger the animation initialization
  }
}

4. Add Animation Classes to Your Template #

Finally, make sure your HTML elements have the required classes to trigger animations. For example:

<div class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.3s">
  This element will animate when it enters the viewport!
</div>

• The wow class is mandatory to enable the animation trigger.
• Add any Animate.css class (like fadeIn, slideInLeft, bounce) to define the animation type.
• Use data-wow-* attributes to tweak duration, delay, or trigger offset.

Final Checks #

• After making these changes, restart your Angular dev server (ng serve)—CLI doesn’t always pick up angular-cli.json changes automatically.
• Verify that both wow.js and animate.css are loading correctly via your browser’s Network tab in dev tools.

Give these steps a try, and your ngx-wow animations should start working as expected!

内容的提问来源于stack exchange，提问作者Smokey Dawson