在 Angular 8 编译脚本（main.js、polyfill.js 等）之后添加脚本

Posted 2023-02-25

【中文标题】在 Angular 8 编译脚本（main.js、polyfill.js 等）之后添加脚本

【英文标题】：Adding scripts after Angular 8 compiled scripts (main.js, polyfill.js, etc)

【发布时间】：2020-07-03 14:43:46

【问题描述】：

在我们由 Angular 8 构建的主要应用程序脚本之后，我们是否可以加载外部脚本，例如由 3rd 方网站提供的脚本？我们已经尝试将它们放在 index.html 的末尾，但在使用 ng -prod 构建后，它们仍在 main.js、polyfill.js 和其他应用程序脚本之前加载

【参考方案1】：

要在Angular App 完成初始化后加载外部脚本，您可以通过在DOM 中添加<script> 节点来“手动”添加它。

loadScript() 
   const scriptElement = this.document.createElement('script');
   scriptElement.src = 'https://....js';
   scriptElement.type = 'text/javascript';
   const headElements = this.document.getElementsByTagName('head');
   headElements[0].appendChild(scriptElement);

然后您可以在component constructor 或您的app module constructor 中调用此方法：

app.module.ts:

export class AppModule 
  constructor() 
    this.loadScript();
  

  loadScript() 
    ...
  



more details with [this tutorial][1].


  [1]: http://www.lukasjakob.com/how-to-dynamically-load-external-scripts-in-angular/

【讨论】：

您能否将我链接到更多教程以了解更多信息。我不是真正的程序员，但我希望能够解决这个问题，即我们在 main 之前加载其他脚本并滞后于页面的加载。

我已经更新了我的答案。通过搜索“external script angular”，您会找到很多其他资源。

非常感谢！是否可以为这些脚本添加延迟？