Wie verwende ich jQuery mit Angular?

Kann mir jemand sagen, wie man jQuery mit Angular benutzt ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

Ich bin mir bewusst, dass es Problemumgehungen wie das Manipulieren der Klasse oder ID des DOM-Elements im Voraus gibt, aber ich hoffe auf eine sauberere Vorgehensweise.

Die Verwendung von jQuery aus Angular2 ist im Vergleich zu ng1 ein Kinderspiel. Wenn Sie TypeScript verwenden, können Sie zuerst auf die jQuery-Typoskriptdefinition verweisen.

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions sind nicht erforderlich, da Sie sie nur anyals Typ für $oder verwenden könnenjQuery

In Ihrer Winkelkomponente sollten Sie mit auf ein DOM-Element aus der Vorlage verweisen @ViewChild() Nachdem die Ansicht initialisiert wurde, können Sie die nativeElementEigenschaft dieses Objekts verwenden und an jQuery übergeben.

Wenn Sie $(oder jQuery) als JQueryStatic deklarieren, erhalten Sie einen typisierten Verweis auf jQuery.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

Dieses Beispiel ist auf plunker verfügbar: http://plnkr.co/edit/Nq9LnK?p=preview

tslint wird sich darüber beschweren, chosendass es keine Eigenschaft für $ ist. Um dies zu beheben, können Sie der JQuery-Oberfläche in Ihrer benutzerdefinierten * .d.ts-Datei eine Definition hinzufügen

interface JQuery {
    chosen(options?:any):JQuery;
}    

Warum machen es alle zu einer Raketenwissenschaft? Für alle anderen, die einige grundlegende Dinge an statischen Elementen erledigen müssen, z. B. bodyTag, tun Sie einfach Folgendes:

1. scriptFügen Sie in index.html ein Tag mit dem Pfad zu Ihrer jquery lib hinzu, egal wo (auf diese Weise können Sie auch IE-bedingte Tags verwenden, um eine niedrigere Version von jquery für IE9 und weniger zu laden).
2. In Ihrem export componentBlock haben Sie eine Funktion, die Ihren Code $("body").addClass("done");aufruft : Normalerweise verursacht dies einen Deklarationsfehler. Fügen Sie also gleich nach allen Importen in diese .ts-Datei hinzu declare var $:any;und los geht's!

Das hat bei mir funktioniert.

SCHRITT 1 - Das Wichtigste zuerst

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

SCHRITT 2 - IMPORT

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#UPDATE - Feb - 2017

In letzter Zeit schreibe ich Code mit ES6statt typescriptund kann importohne * as $in der import statement. So sieht es jetzt aus:

import $ from 'jquery';
//
$('#elemId').width();

Viel Glück.

Jetzt ist es sehr einfach geworden. Sie können dies tun, indem Sie einfach die jQuery-Variable mit einem beliebigen Typ innerhalb des Angular2-Controllers deklarieren.

declare var jQuery:any;

Fügen Sie dies direkt nach den Importanweisungen und vor dem Komponentendekorator hinzu.

Um auf ein Element mit ID X oder Klasse X zuzugreifen, müssen Sie nur noch etwas tun

jQuery("#X or .X").someFunc();

Ein einfacher Weg:

1. Skript einschließen

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. erklären

my.component.ts

declare var $: any;

3. verwenden

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Bitte folgen Sie diesen einfachen Schritten. Es hat bei mir funktioniert. Beginnen wir mit einer neuen Angular 2-App, um Verwirrung zu vermeiden. Ich benutze Angular Cli. Installieren Sie es also, wenn Sie es noch nicht haben. https://cli.angular.io/

Schritt 1: Erstellen Sie eine Demo Angular 2 App

ng new jquery-demo

Sie können einen beliebigen Namen verwenden. Überprüfen Sie nun, ob es funktioniert, indem Sie unter cmd ausführen. (Stellen Sie nun sicher, dass Sie auf 'jquery-demo' zeigen, wenn Sie den Befehl cd nicht verwenden.)

ng serve

Sie werden sehen, "App funktioniert!" im Browser.

Schritt 2: Installieren Sie Bower (einen Paketmanager für das Web)

Führen Sie diesen Befehl auf cli aus (stellen Sie sicher, dass Sie auf 'jquery-demo' zeigen, wenn Sie den Befehl cd nicht verwenden):

npm i -g bower --save

Erstellen Sie nun nach erfolgreicher Installation von bower eine 'bower.json'-Datei mit dem folgenden Befehl:

bower init

Es werden Sie nach Eingaben gefragt. Drücken Sie einfach die Eingabetaste für alle, wenn Sie Standardwerte möchten, und geben Sie am Ende "Ja" ein, wenn Sie nach "Sieht gut aus?"

Jetzt können Sie eine neue Datei (bower.json) im Ordner "jquery-demo" sehen. Weitere Informationen finden Sie unter https://bower.io/

Schritt 3: Installieren Sie jquery

Führen Sie diesen Befehl aus

bower install jquery --save

Es wird ein neuer Ordner (bower_components) erstellt, der den Installationsordner von jquery enthält. Jetzt haben Sie jquery im Ordner 'bower_components' installiert.

Schritt 4: Fügen Sie den Speicherort jquery in die Datei 'angle-cli.json' ein

Öffnen Sie die Datei 'angle-cli.json' (im Ordner 'jquery-demo' vorhanden) und fügen Sie den Speicherort jquery in "scripts" hinzu. Es wird so aussehen:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Schritt 5: Schreiben Sie einen einfachen JQuery-Code zum Testen

Öffnen Sie die Datei 'app.component.html' und fügen Sie eine einfache Codezeile hinzu. Die Datei sieht folgendermaßen aus:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Öffnen Sie nun die Datei 'app.component.ts' und fügen Sie die Deklaration der jquery-Variablen und den Code für das Tag 'p' hinzu. Sie sollten auch den Lifecycle-Hook ngAfterViewInit () verwenden. Nach dem Ändern sieht die Datei folgendermaßen aus:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Führen Sie nun Ihre Angular 2-App mit dem Befehl 'ng serve' aus und testen Sie sie. Es sollte funktionieren.

Sie können den Lifecycle-Hook ngAfterViewInit () implementieren , um einige DOM-Manipulationen hinzuzufügen

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Seien Sie vorsichtig, wenn Sie den Router verwenden, da angle2 möglicherweise Ansichten wiederverwendet. Sie müssen also sicherstellen, dass die Manipulationen der DOM-Elemente nur beim ersten Aufruf von afterViewInit durchgeführt werden. (Sie können dazu statische boolesche Variablen verwenden.)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Ich mache es auf einfachere Weise - erst jquery von npm in der Konsole installieren: npm install jquery -Sund dann in der Komponentendatei schreibe ich einfach: let $ = require('.../jquery.min.js')und es funktioniert! Hier ein vollständiges Beispiel aus meinem Code:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

In teplate habe ich zum Beispiel:

<div class="departments-connections-graph">something...</div>

BEARBEITEN

Alternativ anstelle von:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

verwenden

declare var $: any;

und in Ihre index.html setzen:

<script src="assets/js/jquery-2.1.1.js"></script>

Dadurch wird jquery nur einmal global initialisiert - dies ist beispielsweise für die Verwendung von modalen Fenstern in Bootstrap wichtig ...

Schritt 1: Verwenden Sie den Befehl: npm install jquery --save

Schritt 2: Sie können eckig einfach importieren als:

importiere $ aus 'jquery';

das ist alles .

Ein Beispiel wäre:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// JQuery installierennpm install jquery --save

// Typdefinition für die Abfrage installierentypings install dt~jquery --global --save

// Hinzufügen der JQuery-Bibliothek zur Build-Konfigurationsdatei wie angegeben (in der Datei "angle-cli-build.js")

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// Den Build ausführen, um die JQuery-Bibliothek zum Build hinzuzufügen ng build

// Hinzufügen der relativen Pfadkonfiguration (in system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// importiere die jquery Bibliothek in deine Komponentendatei

import 'jquery';

Unten ist der Code-Snipppet meiner Beispielkomponente

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Wenn Sie Angular-Cli verwenden, können Sie Folgendes tun:

1. Installieren Sie die Abhängigkeit :

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. Importieren Sie die Datei :

   Fügen Sie "../node_modules/jquery/dist/jquery.min.js" zum Abschnitt "script" in der Datei .angular-cli.json hinzu

3. Deklarieren Sie jquery :

   Fügen Sie "$" zum Abschnitt "types" von tsconfig.app.json hinzu

Weitere Details finden Sie im offiziellen eckigen CLI-Dokument

So verwenden Sie Jquery in Angular2 (4)

Befolgen Sie diese Einstellungen

Installieren Sie die Definition des Typs Jquery und Juqry

Für die Jquery-Installation npm install jquery --save

Für die Installation von Jquery Type Defination Installation npm install @types/jquery --save-dev

und importieren Sie dann einfach die Abfrage

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Verwenden von Angular Cli

 npm install jquery --save

In angular.json unter scripts array

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Um jQuery zu verwenden, müssen Sie es lediglich wie folgt in die Komponente importieren, die Sie für jQuery verwenden möchten.

Zum Beispiel das Importieren und Verwenden von jQuery in der Stammkomponente

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Da ich ein Trottel bin, dachte ich, es wäre gut, einen funktionierenden Code zu haben.

Außerdem hat die Angular2-Typisierungsversion von Angular -Protractor Probleme mit der jQuery $ , sodass die am häufigsten akzeptierte Antwort keine saubere Kompilierung ermöglicht.

Hier sind die Schritte, an denen ich arbeiten muss:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

In my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Einfach schreiben

declare var $:any;

Nach allen Importabschnitten können Sie jQuery verwenden und die jQuery-Bibliothek in Ihre index.html-Seite aufnehmen

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

es hat bei mir funktioniert

1) Zugriff auf DOM in der Komponente.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

Sie können jQuery folgendermaßen einschließen. 2) Fügen Sie Ihre jquery-Datei in index.html ein, bevor angle2 geladen wird

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Sie können Jquery folgendermaßen verwenden: Hier verwende ich die JQuery Ui-Datumsauswahl.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

Diese Arbeit für mich.

Ich überspringe die Installation von jquery, da dieser Punkt in allen vor mir erstellten Posts erwähnt wurde. Sie haben also jquery bereits installiert. So importieren Sie t in Ihre Komponente

import * as $ from 'jquery';

wird funktionieren, aber es gibt eine andere "eckige" Möglichkeit, dies durch Erstellen eines Dienstes zu tun.

Schritt Nr. 1: Erstellen Sie die Datei jquery.service.ts .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Schritt. Nein. 2: Registrieren Sie den Dienst in app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Schritt Nr. 3: Fügen Sie den Dienst in Ihre Komponente my-super-duper.component.ts ein

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Ich wäre sehr dankbar, wenn jemand die Vor- und Nachteile beider Methoden erklären könnte: DI jquery as a service vs. import * as $ from 'jquery';

Der effektivste Weg, den ich gefunden habe, ist die Verwendung von setTimeout mit der Zeit 0 innerhalb des Seiten- / Komponentenkonstruktors. Dadurch wird die jQuery im nächsten Ausführungszyklus ausgeführt, nachdem Angular alle untergeordneten Komponenten geladen hat. Einige andere Komponentenmethoden könnten verwendet werden, aber alles, was ich versucht habe, funktioniert am besten, wenn es in einem setTimeout ausgeführt wird.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Folgendes hat bei mir funktioniert - Angular 2 mit Webpack

Ich habe versucht, $als Typ zu deklarieren, anyaber wenn ich versucht habe, ein JQuery-Modul zu verwenden, das ich (zum Beispiel) erhalten habe, $(..).datepicker()ist dies keine Funktion

Da Jquery in meiner Datei vendor.ts enthalten ist, habe ich es einfach mit in meine Komponente importiert

import * as $ from 'jquery';

Ich kann jetzt Jquery-Plugins (wie Bootstrap-DatetimePicker) verwenden

Sie können auch versuchen, es mit dem "InjectionToken" zu importieren. Wie hier beschrieben: Verwenden Sie jQuery in Angular / Typescript ohne Typdefinition

Sie können die globale jQuery-Instanz einfach einfügen und verwenden. Dafür benötigen Sie keine Typdefinitionen oder Typisierungen.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Bei korrekter Einstellung in Ihrer app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Sie können es in Ihren Komponenten verwenden:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Installation der globalen Bibliothek als offizielle Dokumentation hier

1. Von npm installieren:

   npm install jquery --save

2. Fügen Sie den Skripten die erforderlichen Skriptdateien hinzu:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Starten Sie den Server neu, wenn Sie ihn ausführen, und er sollte auf Ihrer App funktionieren.

Wenn Sie innerhalb einer einzelnen Komponente verwenden möchten, verwenden Sie diese import $ from 'jquery';innerhalb Ihrer Komponente

Andere haben bereits gepostet. Aber ich gebe hier ein einfaches Beispiel, damit einige Neuankömmlinge helfen können.

Schritt 1: In Ihrer index.html-Datei verweisen Sie auf jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Schritt 2: Nehmen wir an, wir möchten div auf Knopfdruck ein- oder ausblenden:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Schritt 3: In der Komponentendatei unten deklariert der Import $ als unten:

declare var $: any;

als Funktion wie unten erstellen:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Es funktioniert mit den neuesten Versionen von Angular und JQuery

Installieren Sie zunächst jQuery mit npm wie folgt:

npm install jquery — save

Wechseln Sie anschließend zur Datei ./angular-cli.json im Stammverzeichnis Ihres Angular CLI-Projektordners, suchen Sie die Eigenschaft scripts: [] und geben Sie den Pfad zu jQuery wie folgt ein:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Um jQuery zu verwenden, müssen Sie es nur noch in die Komponente importieren, die Sie für jQuery verwenden möchten.

import * as $ from 'jquery';
(or)
declare var $: any;

Schauen Sie sich den folgenden Code an, der jQuery verwendet, um div beim Klicken zu animieren, insbesondere in der zweiten Zeile. Wir importieren alles als $ aus jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Installieren Sie jquery

Terminal $ npm install jquery

(Für Bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Fügen Sie dann die importAnweisung zu hinzu app.module.ts.

import 'jquery'

(Für Bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Jetzt brauchen Sie nicht mehr <SCRIPT> Tags um auf das JavaScript zu verweisen.

(Auf jedes CSS, das Sie verwenden möchten, muss noch verwiesen werden. styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Wenn Sie Angular verwenden, versuchen Sie, die jquery-Bibliothek nicht zu verwenden. Versuchen Sie, die Funktionen und Bibliotheken zu verwenden, die für das Winkelgerüst erstellt wurden. Wenn Sie die jquery-Funktionen wie find () , html () , next () usw. verwenden möchten, empfehle ich die Verwendung des reinen js. Beispiel: querySelector () , innerHTML , parentElement und etc ...