Angular 9.1.1允许angular组件访问主和运行时包外部的javascript

Angular 9.1.1 允许 Angular 组件访问主和运行时包外部的 JavaScript 文件，这通常是通过在 Angular 应用程序中引入外部脚本文件来实现的。以下是一些基础概念和相关信息：

基础概念

Angular 组件：Angular 应用程序的基本构建块，负责管理视图和逻辑。
外部 JavaScript 文件：不在 Angular 项目的 src 目录下的 JavaScript 文件，可能来自第三方库或其他来源。

优势

灵活性：允许集成现有的 JavaScript 库或自定义脚本，无需重新编写代码。
复用性：可以在多个 Angular 项目中重用相同的脚本文件。
功能扩展：通过外部脚本增强 Angular 应用的功能。

类型

全局脚本：在全局作用域中定义的脚本，可以通过 window 对象访问。
模块化脚本：通过 ES6 模块系统导入的脚本，可以在 Angular 组件中直接导入和使用。

应用场景

集成第三方库：如 jQuery、D3.js 等。
使用 Web APIs：如地理位置、WebSockets 等。
自定义业务逻辑：需要使用现有的 JavaScript 代码库来实现特定功能。

如何引入外部 JavaScript 文件

方法一：在 `angular.json` 中配置

在 angular.json 文件中，可以在 scripts 数组中添加外部脚本的路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "path/to/your/external-script.js"
            ]
          }
        }
      }
    }
  }
}

方法二：在组件中动态加载

在 Angular 组件中，可以使用 Renderer2 服务动态创建 <script> 标签并添加到 DOM 中：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.type = 'text/javascript';
    script.src = 'path/to/your/external-script.js';
    this.renderer.appendChild(document.body, script);
  }
}

遇到的问题及解决方法

问题：外部脚本未正确加载

原因：

路径错误。
网络问题导致文件无法下载。
浏览器缓存问题。

解决方法：

检查脚本路径是否正确。
确保网络连接正常。
清除浏览器缓存或使用无痕模式重新加载页面。

问题：脚本中的全局变量或函数在 Angular 组件中不可用

原因：

脚本加载顺序问题，Angular 组件可能在脚本加载完成前执行。
脚本中的变量或函数未正确暴露到全局作用域。

解决方法：

确保脚本在 Angular 组件初始化之前加载完成。
使用 window 对象访问全局变量或函数，例如 window.myFunction()。

示例代码

假设我们有一个外部 JavaScript 文件 external-script.js，其中定义了一个全局函数 myFunction：

// external-script.js
window.myFunction = function() {
  console.log('External function called!');
};

在 Angular 组件中调用这个函数：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  ngOnInit() {
    if (window.myFunction) {
      window.myFunction();
    } else {
      console.error('myFunction is not defined');
    }
  }
}

通过以上方法，你可以成功地在 Angular 9.1.1 中引入和使用外部 JavaScript 文件。