Question

我是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"
]

Answer 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。这对我来说很好

Answer 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"
]

Answer 3

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

Answer 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"
    ]

Answer 5

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

Click here作为解决方案，

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

5 个答案: