Внешние JS-файлы не загружаются в Angular CLI 7.1.4

Question

Я новичок в Angular и установил последнюю версию Angular.Я также интегрировал Admin Theme, в которой есть bootstrap.css, другие CSS и другие JS, включая jQuery.Я погуглил «Как использовать внешний файл .js в Angular», но ни одно из решений не сработало.Я уже установил jQuery, Bootstrap и другие плагины jQuery от js до npm install

Ниже приведен мой файл 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-файлы перед загрузкой jQuery. Сначала необходимо загрузить jQuery, чтобы код jQuery во внешнем js-файле работал, проверьте следующий порядок

"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 2

Вы можете загрузить 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 3

Один из возможных способов проверки установленных внешних файлов 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 4

если вы не можете загрузить внешний js-файл из angular.json после перехода на другой URL, вам нужно создать сервис для загрузки js-файлов.после этого импортируйте этот сервис во все компоненты, в которые вы хотите загрузить функциональные возможности этого js, и вызовите сервис по методу ngOnInit ().под ссылкой на github даны инструкции по созданию сервиса и файла component.ts.Спасибо

Нажмите здесь для решения,

Answer 5

Я подозреваю, что ваши пути к node_modules должны быть относительными - "../node_modules/