如何在Angular4中导入外部Mastercard Checkout JS文件？

Hey there! Let's walk through how to properly get that Mastercard Checkout JS working in your Angular app—since just adding it to angular-cli.json or a <script> tag alone won't cut it (thanks to TypeScript's strict type checking). Here's what you need to do:

1. 正确配置脚本加载（二选一即可，推荐第一种） #

方式一：通过angular-cli.json（Angular 5及以下）或angular.json（Angular 6+）配置 #

• Open your config file, locate the scripts array under the build target.
• Add the full CDN URL directly to the array:

  "scripts": [
    "https://ap-gateway.mastercard.com/checkout/version/46/checkout.js"
  ]
  

• Important: Restart your Angular dev server (ng serve) after making this change—config updates only take effect on server startup.

方式二：通过根index.html引入（不推荐，但可作为备选） #

Instead of adding the <script> tag to app.component.html, place it in your root index.html right before the closing </body> tag. This ensures the script loads before your Angular app initializes:

<script src="https://ap-gateway.mastercard.com/checkout/version/46/checkout.js"></script>

2. 解决TypeScript类型报错 #

TypeScript doesn't recognize functions from external JS files by default, so you'll get "cannot find name" errors unless you declare the types. Here are two ways to fix this:

方法一：临时声明（适合快速测试） #

At the top of your component file (outside the component class), add this line to declare the global function/object:

// 替换成JS文件实际暴露的函数/对象名，比如如果是initCheckout就声明initCheckout
declare var MastercardCheckout: any;

Then call the function normally inside your component methods (preferably after the view loads):

ngAfterViewInit() {
  MastercardCheckout.init({ /* 你的配置参数 */ });
}

方法二：创建类型声明文件（推荐，更规范） #

• Create a new file in your src folder named mastercard-checkout.d.ts
• Add type declarations for the functions you need. For example, if the JS exposes a global MastercardCheckout object with an init method:

  declare global {
    interface Window {
      MastercardCheckout: {
        init: (config: Record<string, any>) => void;
        // 可根据JS实际提供的方法添加更多声明
      };
    }
  }
  

• Now you can safely call the function via window.MastercardCheckout.init(...) in your component, with full TypeScript support.

3. 确保脚本加载完成后再调用 #

CDN scripts might take a moment to load, so wrap your function call in a check to avoid errors:

ngAfterViewInit() {
  const checkScriptLoaded = setInterval(() => {
    if (window.MastercardCheckout) {
      clearInterval(checkScriptLoaded);
      window.MastercardCheckout.init({ /* 你的配置 */ });
    }
  }, 100);
}

That should get you up and running! If you hit snags with specific function names or configs, feel free to dig into the Mastercard JS docs to confirm the exact exposed API.

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