title: Integrate AOS library with Angular4 application
body: <p>I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin <a href="https://github.com/michalsnik/aos" rel="noreferrer">AOS</a></p>
  
  <p>my code:</p>
  
  <p>app.component.ts  </p>
  
  <pre><code>import * as AOS from 'aos';
  
  @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   encapsulation:ViewEncapsulation.None
  })
  export class AppComponent implements OnInit {
   ngOnInit(){
    AOS.init();
   }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div class="box" data-aos="slide-left"&gt;
        &lt;img src="assets/imgs/seo.png" alt=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>angulr.cli.json</p>
  
  <pre><code>"styles": [
      "../node_modules/aos/dist/aos.css",
      "../node_modules/animate.css/animate.min.css",
      "styles.scss"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/aos/dist/aos.js"
    ],
  </code></pre>
  
  <p>I've tried the answer here with no hope
  <a href="https://stackoverflow.com/a/44808496/4183947">https://stackoverflow.com/a/44808496/4183947</a></p>
  
  <p><strong>Note:</strong> I've no errors in my console.</p>