Angular CLI 7.1.4 中未加载外部 JS 文件答案

【问题标题】：External JS files are not loading in Angular CLI 7.1.4Angular CLI 7.1.4 中未加载外部 JS 文件
【发布时间】：2019-02-23 13:44:30
【问题描述】：

我是 Angular 新手，安装了最新版本的 Angular。我还集成了具有 bootstrap.css、其他 CSS 和其他 JS 包括 jQuery 的管理主题。我用谷歌搜索了“如何在 Angular 中使用外部 .js 文件”，但没有一个解决方案有效。我已经通过npm install安装了jQuery、Bootstrap等jQuery插件js

下面是我的 angular.json 文件。

"scripts": [
    "src/assets/js/main.js",
    "node_modules/jquery/dist/jquery.js",              
    "src/assets/vendor/jquery-ui.min.js",
    "node_modules/animsition/dist/js/animsition.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/popper.js/dist/popper.min.js"
]

【问题讨论】：

标签： jquery angular angular7

【解决方案1】：

您可以在组件或模块级别加载 js

第 1 步：在 component.ts 文件中

public loadScript(url) {
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
}

第 2 步：在 ngOnInit() 中

this.loadScript("assets/js/script.js");

这将动态加载外部 js。这对我来说很好用

【讨论】：

【解决方案2】：

你在加载jQuery之前加载外部js文件，你需要先加载jQuery，这样你外部js文件中的jQuery代码才能工作，检查下面的顺序

"scripts": [
    "node_modules/jquery/dist/jquery.js",              
    "src/assets/vendor/jquery-ui.min.js",
    "node_modules/animsition/dist/js/animsition.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/popper.js/dist/popper.min.js",
    "src/assets/js/main.js"
]

【讨论】：

【解决方案3】：

我怀疑你到 node_modules 的路径应该是相对的 - "../node_modules/

【讨论】：

对于 Angular 7，它应该以“node_modules”开头，没有“../”

【解决方案4】：

验证已安装的外部 JS 文件的一种可能方法是转储其版本号。

编辑你的 app.module.ts 文件并添加这个函数：

declare var $: any;

function dumpVersions() {
    console.log(`Angular: ${VERSION.full}, jQuery: ${$.fn.jquery}, jQueryUI: ${$.ui.version}`);
}

然后这样称呼它：

dumpVersions(); // <-- call

@NgModule({
    declarations: [
        AppComponent

对于 VERSION，您需要像这样编辑您的导入：

import { NgModule, VERSION } from '@angular/core';

确保您像这样引用 node_modules 下的所有脚本：

    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery-ui-bundle/jquery-ui.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

【讨论】：

【解决方案5】：

如果导航到另一个 url 后无法从 angular.json 加载外部 js 文件，则需要创建一个用于加载 js 文件的服务。之后将该服务导入要加载该 js 功能的所有组件中，并在 ngOnInit() 方法上调用该服务。在 github 链接下方给出了如何创建服务和 component.ts 文件功能。谢谢你

Click here为解决方案，

【讨论】：