通过angular-cli.json加载依赖后index.html中$未定义及AOS加载咨询

一、为什么在index.html中使用jQuery会报$ is not defined？ #

你遇到的这个问题，核心是脚本加载时机的冲突。

Angular CLI会把你在.angular-cli.json的scripts数组里配置的文件，打包到应用的bundle中，并且在生成的index.html里，这些bundle脚本是放在</body>标签之前加载的。但如果你自己在index.html中写的jQuery代码（比如直接放在<head>里，或者bundle脚本之前的<script>标签中），会在jQuery还没被加载完成时就执行，自然找不到$变量，抛出Uncaught ReferenceError。

解决办法： #

• 方法1：把jQuery代码移到Angular组件生命周期中
  利用Angular的生命周期钩子（比如ngAfterViewInit），确保DOM和jQuery都已加载完毕再执行代码：

  import { Component, AfterViewInit } from '@angular/core';
  declare var $: any; // 声明$变量，避免TypeScript类型报错
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
      // 这里写你的jQuery逻辑，比如：
      $('#target-element').fadeIn();
    }
  }
  

• 方法2：调整index.html中代码的位置
  如果你一定要在index.html中写jQuery代码，把你的<script>标签放到Angular CLI自动插入的bundle脚本之后（通常是runtime.js、polyfills.js、main.js这类脚本的后面），确保jQuery加载完成后再执行代码。

二、能否通过.angular-cli.json加载AOS的CSS和JS？ #

完全可以！按照以下步骤就能顺利集成：

1. 先安装AOS依赖（如果还没安装）：

   npm install aos --save
   

2. 在.angular-cli.json中配置资源路径：
   • 在styles数组中添加AOS的CSS文件：

     "styles": [
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",
       "../node_modules/aos/dist/aos.css",
       "styles.css"
     ]
     

   • 在scripts数组中添加AOS的JS文件：

     "scripts": [
       "../node_modules/jquery/dist/jquery.js",
       "../node_modules/bootstrap/dist/js/bootstrap.min.js",
       "../node_modules/aos/dist/aos.js"
     ]
     

3. 在Angular组件中初始化AOS：
   不要直接在index.html中写AOS.init()，而是在根组件（比如AppComponent）的ngAfterViewInit钩子中初始化，确保DOM和AOS脚本都已准备就绪：

   import { Component, AfterViewInit } from '@angular/core';
   
   declare var AOS: any; // 声明AOS变量，解决TypeScript类型检测问题
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewInit {
     ngAfterViewInit() {
       AOS.init({ 
         easing: 'ease-in-out-sine', 
         once: true 
       });
     }
   }
   

这样配置后，AOS就能正常工作啦！

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