Question

我正在尝试将付款集成到我的角度应用程序中，两家提供商（Paypal和Adyen）都给您提供了一个托管在他们网页上的js文件，他们建议将其放入HTML中。像这样：

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

没有npm包可以导入为其他任何js。

因此，据我了解，您不允许将<script>放在角组件中，但是我不喜欢将其放入index.html中，因为它将被加载到{应用程序加载，增加了应用程序的加载时间，而仅在一些与付款相关的组件中需要，并且可以在以后加载。谢谢。

有什么想法吗？

Answer 1

如果使用的是Angular CLI，则有一个.angular-cli.json文件，您可以在其中插入自定义脚本。您可以将自定义脚本插入“ scripts”属性，该属性采用文件的相对路径的数组。例如，您可以执行以下操作：

"scripts": [
    "js/someScript.js",
    "js/anotherScript.js"
]

您也不必担心这些文件的缩小。 Webpack为您做到了。

如果您希望动态加载一些外部js文件而不加载捆绑包中的所有内容，则可以在component.ts中这样做。 answer中指定的格式。

loadScripts() {
    const dynamicScripts = [
   'https://platform.twitter.com/widgets.js',
   '../../../assets/js/dummyjs.min.js'
  ];
  for (let i = 0; i < dynamicScripts.length; i++) {
    const node = document.createElement('script');
    node.src = dynamicScripts[i];
    node.type = 'text/javascript';
    node.async = false;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}

在构造函数中。

constructor() {
  this.loadScripts();
}

但是就SPA而言，从一开始就加载所有内容都没有问题，因为在初始加载之后，它们将不再被加载。

Angular应用程序-放置脚本标签的位置

1 个答案: