<script> 不适用于 Angular 5 组件（使用 Angular 2+ 的格子链接）答案

【问题标题】：<script> not working in angular 5 components (Plaid Link with Angular 2+)<script> 不适用于 Angular 5 组件（使用 Angular 2+ 的格子链接）
【发布时间】：2019-01-31 18:06:58
【问题描述】：

我正在尝试在 Angular Web 应用程序中使用 Plaid Link。 plaid 提供的脚本似乎只在 index.html 文件的<body> 内有效。当我尝试在组件中使用它时，脚本根本不会运行。

我正在关注https://plaid.com/docs/quickstart/#step-2-simple-integration的文档

如果我只在其中制作一个基本的 html 文件，但在 angular 组件内部却不能工作，他们有一些 jquery 代码可以正常工作/

这是一个不能在 Angular 中工作的代码示例？

`<form id='plaid-link-form'></form>
<script
src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"
data-client-name="My App"
data-form-id="plaid-link-form"
data-key="[PUBLIC KEY]"
data-product="auth"
data-env="sandbox">
</script>`

编辑：我犯了一个错误。我使用 Angular 5，而不是 2。

【问题讨论】：

标签： jquery angular plaid

【解决方案1】：

如果您使用的是system.js，请尝试使用system.js 的import 函数导入脚本，如下所示：-

export class YourComponent {
  constructor(){
    System.import('https://cdn.plaid.com/link/v2/stable/link-initialize.js').then(Plaid => {
      var handler = Plaid.create({
        clientName: 'My App',
        env: 'sandbox',
        key: '[PUBLIC_KEY]', // Replace with your public_key to test with live credentials
        product: ['auth'],
      });
    });
  }
}

如果你使用的是webpack，那么你可以调用require.ensure函数来加载需要的文件。

export class YourComponent {
  constructor(){        
   require.ensure(['https://cdn.plaid.com/link/v2/stable/link-initialize.js'], require => {
     let Plaid = require('<module_path>');
     Plaid.create({
       // config object
     })
   }); 
  }
}

【讨论】：

我已经对我的问题进行了更正，我使用的是 Angular 5 而不是 Angular 2。我尝试添加 system.js，但似乎无法使其正常工作。我在索引中添加了一个脚本：但是应用程序无法编译，我收到一个错误，即找不到名称“系统”并且在 url 中找不到模块。
@Baron - 你检查过 webpack 吗？

【解决方案2】：

我在这个存储库中发现了一个使用格子链接的 Ionic 2 (Angular2+)。 https://github.com/pbernasconi/plaid-link-ionic-2-example/tree/master/src 我将脚本添加到索引中，然后在控制器中运行它。我不完全理解 declarations.d.ts 文件是如何发挥作用的，但我现在有一个包含相同代码的文件。

【讨论】：