Angular集成Jira Issue Collector失效，求助问题排查

问题概述 #

尝试将Jira Issue Collector集成到Angular应用中，先后试过两种方案均失败：

• 在组件内通过jQuery异步加载Collector脚本，无任何响应
• 直接在index.html注入脚本，出现window.showCollectorDialog is not a function和ReferenceError: jQuery is not defined错误

现有实现代码 #

Component.ts #

import { Component, OnInit } from '@angular/core';
import * as jQuery from 'jquery';

declare global {
   interface Window { ATL_JQ_PAGE_PROPS: any; }
 }

window.ATL_JQ_PAGE_PROPS = window.ATL_JQ_PAGE_PROPS || {};

@Component({
  selector: 'cmdb-jira-issue-collector',
  templateUrl: './jira-issue-collector.component.html',
  styleUrls: ['./jira-issue-collector.component.scss']
})
export class JiraIssueCollectorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  submitIssue() {
    console.log('submitIssue');

    jQuery.ajax({
      url: "my-url",
      type: 'get',
      cache: true,
      dataType: 'script'
    });

    window.ATL_JQ_PAGE_PROPS =  {
      "triggerFunction": function(showCollectorDialog) {
        showCollectorDialog();
      }
    };
  }
}

Component.html #

<p>jira-issue-collector works!</p>
<button (click)="submitIssue()" id="submit">Submit Issue</button>

错误原因分析 #

1. 异步加载时序问题：组件内通过jQuery.ajax加载脚本是异步操作，设置ATL_JQ_PAGE_PROPS时Collector脚本尚未加载完成，导致showCollectorDialog方法未定义
2. jQuery全局依赖问题：Jira Collector脚本依赖全局环境的jQuery对象，直接注入index.html时如果jQuery未提前加载，就会抛出jQuery is not defined错误
3. 重复加载与配置覆盖：每次点击按钮都重新加载脚本，且未判断脚本是否已加载，可能导致配置被覆盖或冲突

解决方案 #

步骤1：全局引入jQuery到Angular项目 #

首先确保jQuery在全局环境可用，避免组件内局部导入的问题：

1. 安装jQuery：

npm install jquery --save

2. 在angular.json的scripts数组中添加jQuery的本地路径（放在Collector脚本之前）：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js"
]

3. 在src/typings.d.ts中添加全局声明（如果项目没有该文件则新建）：

declare var jQuery: any;
declare var $: any;

步骤2：优化组件内的集成逻辑 #

修改submitIssue方法，确保脚本加载完成后再触发Collector对话框，同时避免重复加载：

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

declare global {
  interface Window { 
    ATL_JQ_PAGE_PROPS: any;
    showCollectorDialog?: () => void;
  }
}

@Component({
  selector: 'cmdb-jira-issue-collector',
  templateUrl: './jira-issue-collector.component.html',
  styleUrls: ['./jira-issue-collector.component.scss']
})
export class JiraIssueCollectorComponent implements OnInit {
  private collectorLoaded = false;
  private collectorUrl = "your-jira-collector-url"; // 替换为实际的Collector URL

  constructor() { }

  ngOnInit() { }

  submitIssue() {
    // 如果脚本已加载，直接触发对话框
    if (this.collectorLoaded && window.showCollectorDialog) {
      window.showCollectorDialog();
      return;
    }

    // 异步加载Collector脚本，加载完成后配置并触发
    jQuery.ajax({
      url: this.collectorUrl,
      type: 'get',
      cache: true,
      dataType: 'script'
    }).done(() => {
      this.collectorLoaded = true;
      // 配置Collector属性并触发对话框
      window.ATL_JQ_PAGE_PROPS = {
        triggerFunction: (showCollectorDialog: () => void) => {
          showCollectorDialog();
        }
      };
    }).fail((error) => {
      console.error('加载Jira Collector脚本失败:', error);
    });
  }
}

步骤3：备选方案——通过index.html注入脚本 #

如果选择在index.html中注入，需严格保证加载顺序：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再加载Jira Collector脚本 -->
<script type="text/javascript" src="your-jira-collector-url"></script>
<!-- 配置Collector并提供触发方法 -->
<script type="text/javascript">
  window.ATL_JQ_PAGE_PROPS = {
    triggerFunction: function(showCollectorDialog) {
      // 将showCollectorDialog挂载到window，供组件调用
      window.showCollectorDialog = showCollectorDialog;
    }
  };
</script>

然后在组件中直接调用：

submitIssue() {
  if (window.showCollectorDialog) {
    window.showCollectorDialog();
  } else {
    console.error('Jira Collector尚未加载完成');
  }
}

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