1
votes

Les fichiers JS externes ne se chargent pas dans Angular CLI 7.1.4

Je suis nouveau dans Angular et j'ai installé la dernière version d'Angular. J'ai également intégré le thème Admin qui contient bootstrap.css, d'autres CSS et autres JS, y compris jQuery. J'ai googlé 'Comment utiliser un fichier .js externe dans Angular' mais aucune des solutions n'a fonctionné. J'ai déjà installé jQuery, Bootstrap et d'autres plugins jQuery js via npm install

Voici mon fichier 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"
]

angular jquery angular7

0 commentaires

5 Réponses :

0
votes

Je soupçonne que vos chemins vers les node_modules devraient être relatifs - "../node_modules/

1 commentaires

pour Angular 7, il devrait commencer par "node_modules" sans "../"

0
votes

Une façon possible de vérifier les fichiers JS externes installés est de vider ses numéros de version.

Modifiez votre fichier app.module.ts et ajoutez cette fonction:

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

Et appelez-le comme ceci:

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

Pour VERSION, vous devez modifier votre importation comme ceci:

dumpVersions(); // <-- call

@NgModule({
    declarations: [
        AppComponent

Assurez-vous de référencer tous les scripts sous node_modules comme ceci:

declare var $: any;

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

0 commentaires

0
votes

si vous ne parvenez pas à charger le fichier js externe à partir d'angular.json après avoir navigué vers une autre URL, vous devez créer un service pour charger les fichiers js. après cela, importez ce service dans le composant all dans lequel vous souhaitez charger la fonctionnalité de ce js et appelez le service sur la méthode ngOnInit (). sous le lien github, vous trouverez comment créer un service et une fonctionnalité de fichier component.ts. Merci

Cliquez ici pour la solution,

0 commentaires

2
votes

Vous pouvez charger js au niveau du composant ou du module

Étape 1: Dans le fichier component.ts

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

Étape 2: Dans ngOnInit ()

XXX

Cela chargera dynamiquement les js externes. Cela fonctionne très bien pour moi

0 commentaires

2
votes

Vous chargez des fichiers js externes avant le chargement de jQuery, vous devez d'abord charger jQuery, afin que le code jQuery dans votre fichier js externe fonctionne, vérifiez ci-dessous la commande

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

0 commentaires