jquery - Angular 7+，如何正确包含和使用 jquery 依赖或 js ui-libraries（无类型）并加载/卸载它们

Question

我正在尝试为网站导入 jQuery 依赖的 js 库。

我的问题是我不知道导入不提供具有方法和属性的类型化类的外部 js 库的最终或最佳实践是什么。

请注意，我已经阅读并尝试了几乎所有的SO解决方案和博客，除了我在这里找到的，如何在 Angular 2 中使用 bootstrap 4？

我不明白如何为一个库或这么多库定义一个定义文件......有没有更好的方法？

到目前为止我尝试了什么，

1. 我尝试在脚本标签中包含 jquery 和其他文件，这样做我遇到了一个问题，它在 dom 中找不到 HTML，因为从其他组件导航时它还没有呈现，所以我认为我必须运行脚本（除了来自模板中的 JS 文件）在组件本身内部，也许还做一些 onLoad 检测？（请指教）

例如，我有一个 HomeComponent，它依赖于 Slider Revolution JS，它依赖于 jQuery，如果我加载其他组件并再次加载 home 组件，滑块不会运行..当然我认为这不是最好的方法，因为我会正在加载该页面或组件中不需要的许多 JS 库，并且它还在内存中继续运行，因此我必须在销毁组件的同时杀死每个进程。

2. 我尝试从 index.html 中删除所有内容，并在 angular.json 脚本属性中添加了整个应用程序所需的常见内容，例如 Bootstrap JS 等。

安装 jQuery 类型并使用 import * as $ from 'jquery' 将其加载到应用程序组件中。

我使用 import "file path" 导入的其余部分（来自我使用 angular.json 的 assets 属性捆绑的文件夹）

// 我的 angular.json 脚本数组

[
              "src/scripts/vendor/animsition/js/animsition.min.js", 
              "src/scripts/vendor/bootstrap/js/popper.js",
              "src/scripts/vendor/bootstrap/js/bootstrap.min.js"
]

// app.component.ts 导入语句

import * as $ from 'jquery';

(window as any).jQuery = (window as any).$ = $;

// home.component.ts（在 app.component 中加载）导入语句

import "scripts/vendor/revolution/js/jquery.themepunch.tools.min.js";
import "scripts/vendor/revolution/js/jquery.themepunch.revolution.min.js";
import "scripts/js/revo-custom.js";

// 在 HomeComponent 的 ngOnInit 方法中，我运行 this.scripts() 方法来调用旋转滑块

  ngOnInit() {

    this.scripts(); // run extra UI methods for slider
  }

//内部脚本方法我调用我的整个脚本，这将使我的滑块革命工作......如模板所给，但我已经尝试并添加和删除了许多来源所建议的这部分

declare let Revolution: any;

// 我的脚本方法

  private scripts() {

    declare let Revolution: any;

    console.log(Revolution);

    jQuery(document).ready(function() {

        /*==================================================================
        [ Revo1 ]*/
        var screenH1 = 0;
        var offsetArrow1 = 0;
        if ($(window).width() >= 992) {
            screenH1 = $(window).height();
            offsetArrow1 = 120;
        }
        else {
            screenH1 = $(window).height() - 70;
            offsetArrow1 = 30;
        }

        jQuery('#rev_slider_1').show().revolution();

错误：

Angular CLI 编译错误：

ERROR in src/app/app.component.ts(63,23): error TS2339: Property 'counterUp' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(45,5): error TS1184: Modifiers cannot appear here.
src/app/core/components/home/home.component.ts(64,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.

在将所有导入（与滑块 rev 相关）移动到 HomeComponent 之前，我在控制台中遇到了这些错误。

// Error 1:


Uncaught TypeError: jQuery(...).show(...).revolution is not a function
    at HTMLDocument.<anonymous> (home.component.ts:63)
    at mightThrow (jquery.js:3557)
    at process (jquery.js:3625)



// Error 2: 
// from some other plugin due to the same issue...

src/app/app.component.ts(64,23): error TS2339: Property 'counterUp' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(63,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(143,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(219,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(313,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(392,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.
src/app/core/components/home/home.component.ts(472,40): error TS2339: Property 'revolution' does not exist on type 'JQuery<HTMLElement>'.

我认为我们需要的解决方案是我找不到一个答案，但有许多不同的答案和那些不起作用的答案（包括 SO 和博客文章）......

我的主要担忧如下：

1. 如何在没有类型的情况下使用 jquery，因为使用任何其他库 tslint 给我们一个错误，说它不是一个已知的属性，但我们现在没有使用 jQuery 来使用它的函数。其他一些博客文章declare var $: any在课堂之外引用，但它引发了错误，我也尝试了其他方式。

2. 如何导入 JS 库并管理依赖关系并声明该文件在这两种情况下都依赖于另一个文件，当它依赖于我们已作为类型导入的 jQuery 时，以及当我们依赖于某个其他库时，例如 TweenMax。

3. 进行这些与 DOM 相关的 UI 更改需要像滑块一样加载 DOM 的最佳方法是什么，因为它们将计算宽度和无法预渲染的内容。

4. 我正在使用一个 HTML 模板，它使用了几个收集的样式和脚本，我应该如何将它分解为需要特定样式或脚本的组件，或者我应该保持全局​​并加载一次，这使得它在第一次加载时过于庞大，最好的做法是什么，你会怎么做？

让我们把它（如果可以的话）作为一个权威指南，包括所有信息，包括外部 JS 库和全局和本地管理依赖项。

PS 我知道很多人会说不应该这样做，组件应该一个一个地编码和设计，并保持模块化，不应该使用 jQuery 和 Bootstrap，因为它们的替代品是可用的，但在这种情况下，对于这个特定的项目..我已经开发并准备好了功能，并且我有一个预建的 HTML 主题，它是用这些库和样式设计和构建的，所以，我必须这样做。

标签： jqueryangulartypescript