Angular2中脚本的添加位置技术咨询

嘿，在Angular 2里添加脚本文件的位置，得看你的具体需求和脚本类型，我给你拆解几个常用的场景，都是项目里实际会用到的：

1. Angular CLI配置文件（最推荐的规范方式） #

如果你是用Angular CLI搭建的项目，优先用这种方式。修改项目根目录下的angular.json（要是更早的Angular 2版本，可能是.angular-cli.json），找到architect -> build -> options里的scripts数组，把你的脚本路径加进去：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./src/assets/custom-global-script.js"
]

这样CLI会自动把这些脚本打包到最终的构建产物里，不用手动在HTML里写标签，还能保证加载顺序和项目构建流程一致，后期维护也方便。

2. 根目录的index.html文件 #

要是有些脚本不需要打包，或者必须在Angular应用启动前加载（比如某些全局初始化的依赖），可以直接在src/index.html里加：

<!-- 放在head里：适合需要提前加载的脚本，可能会阻塞页面渲染 -->
<head>
  <script src="./assets/early-load-script.js"></script>
</head>

<!-- 放在body末尾：更推荐，避免阻塞页面渲染，等Angular根组件加载完再加载脚本 -->
<body>
  <app-root></app-root>
  <script src="./assets/late-load-script.js"></script>
</body>

注意路径要相对于index.html的位置，比如src/assets下的脚本，路径就是./assets/xxx.js。

3. 组件内动态加载（按需加载） #

如果某个脚本只在特定组件里用到，不想全局加载浪费资源，可以在组件的生命周期钩子（比如ngOnInit）里动态创建脚本标签加载：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-specific-component',
  templateUrl: './specific-component.component.html'
})
export class SpecificComponentComponent implements OnInit {
  ngOnInit(): void {
    const scriptElement = document.createElement('script');
    scriptElement.src = './assets/component-only-script.js';
    // 脚本加载完成后可以执行相关逻辑
    scriptElement.onload = () => {
      console.log('组件专属脚本加载完成，可以用啦');
    };
    document.body.appendChild(scriptElement);
  }
}

这种方式能有效减少应用的初始包体积，适合那些不是全局需要的脚本。

4. npm第三方库直接导入 #

如果是通过npm安装的第三方库，很多支持ES模块导入，直接在组件或服务里import就行，不用手动加脚本标签，比如：

import * as _ from 'lodash';

ngOnInit() {
  // 直接使用库的方法
  console.log('判断对象是否为空：', _.isEmpty({}));
}

这种方式符合Angular的模块化理念，而且Tree Shaking还能帮你剔除未使用的代码，优化打包体积。

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