Angular7添加外部JS文件：除scripts配置外的方法及配置无效问题

嘿，我来帮你梳理下 Angular 7 里添加外部 JavaScript 文件的其他方法，顺便也聊聊你配置没生效可能的原因哈！

1. 在 index.html 中直接引入 #

这是最直观的方式，直接把 <script> 标签放到 index.html 的 <head> 或者 <body> 末尾（推荐放 body 末尾，确保 DOM 加载完成后执行脚本）：

<body>
  <app-root></app-root>
  <!-- 按依赖顺序引入脚本 -->
  <script src="assets/js/core/jquery.min.js"></script>
  <script src="assets/js/core/popper.min.js"></script>
  <script src="assets/js/core/bootstrap-material-design.min.js"></script>
  <script src="assets/js/plugins/moment.min.js"></script>
</body>

注意路径是相对 index.html 的位置，因为 index.html 和 assets 都在 src 目录下，所以直接写 assets/xxx 就可以。

2. 在组件中动态按需加载脚本 #

如果不想全局引入，只想在特定组件里使用某个脚本，可以通过动态创建 <script> 标签来加载，比如在组件的 ngOnInit 钩子中实现：

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

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css']
})
export class TargetComponentComponent implements OnInit {

  ngOnInit(): void {
    // 按顺序加载需要的脚本
    this.loadScript('assets/js/core/jquery.min.js');
    this.loadScript('assets/js/core/popper.min.js');
    this.loadScript('assets/js/core/bootstrap-material-design.min.js');
  }

  private loadScript(url: string): void {
    const scriptElement = document.createElement('script');
    scriptElement.src = url;
    scriptElement.type = 'text/javascript';
    scriptElement.async = false; // 关闭异步，保证脚本加载顺序
    document.body.appendChild(scriptElement);
  }
}

这种方式适合按需加载，不会给全局环境增加不必要的变量。

3. 用 TypeScript 声明文件解决类型报错 #

如果引入的 JS 库没有自带 TypeScript 类型定义（比如 jQuery），即使你成功引入了脚本，TS 编译器也可能会报“找不到变量”的错误。这时候可以：

• 安装对应的类型包（如果有的话）：

  npm install @types/jquery --save-dev
  npm install @types/bootstrap --save-dev
  

• 或者自己创建一个全局声明文件，比如在 src 目录下新建 typings.d.ts：

  declare var $: any;
  declare var bootstrap: any;
  declare var moment: any;
  

  这样 TS 就能识别这些全局变量了。

聊聊你配置 scripts 数组没生效的可能原因 #

你之前在 angular.json 里配置 scripts 的方式本身是正确的，没生效大概率是这几个问题：

• 路径错误：仔细核对文件路径，确保 src/assets/js/xxx 下确实存在对应的文件，比如有没有拼写错误、文件夹层级不对。
• 没重启开发服务器：修改 angular.json 后，必须重启 ng serve，否则新的配置不会生效。
• 依赖顺序不对：比如 Bootstrap 依赖 jQuery 和 Popper.js，你之前的数组里 Popper 放在最后，这会导致 Bootstrap 加载时找不到依赖。正确的顺序应该是 jQuery → Popper → Bootstrap → Moment。
• TS 未识别全局变量：即使脚本加载成功，TS 可能还是找不到全局变量，这时候就需要上面提到的声明文件来解决。

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