Dev Faq
0
votes

Basculer et les modaux ne fonctionnent pas sur l'application angulaire

Je suis nouveau dans l'angulaire et que vous avez des problèmes avec une bascule de bootstrap et modal au travail. Les fichiers BOOTSTRAP CSS fonctionnent car le formulaire reprend le style; Cependant, je pense que les fichiers JS ne sont pas liés correctement. S'il vous plaît laissez-moi savoir ce que je fais du travail.

J'ai fait une installation NPM de bootstrap et jQuery à l'aide de la CLI angulaire. Une fois installé, j'ai raccordé les fichiers Bootstrap et JQuery au fichier angular.json pour que l'application puisse utiliser les bibliothèques. P> 

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/LyndaChapter1",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            **"styles": [
              **"node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"**
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/jquery/dist/jquery.js"
            ],**
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

4 commentaires

Avez-vous essayé de mettre le JQuery Dep d'abord? Bootstrap dépend de JQuery, il est donc nécessaire de se charger d'abord.

Plutôt que de compter sur JQuery que vous devriez éviter, il existe déjà un packages de composants angulaires de bootstrap que vous pouvez utiliser.

@Jacques ジャック, merci pour cela, je pense que votre suggestion a fait l'affaire.

Je l'ai ajouté comme une réponse.

3 Réponses :

0
votes

Essayez d'ajouter ces packages à votre fichier package.json et exécutez la commande d'installation de NPM --Save sur le niveau de fichier package.json.

/ * "@ ng-bootstrap / ng-bootstrap": "^ 4.1.0", "Bootstrap": "^ 4.3.1" * /

0 commentaires
0
votes

jQuery est un mauvais choix pour courir sur l'angulaire ... ce dont vous avez peut-être besoin est Ngbootstrap

Il existe un excellent code de chaudière là-bas que vous pouvez utiliser simplement comme J'ai fait ici A > p>

pertinent html fort>: p> xxx pré>

pertinent TS fort>: p> 

import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;
  public isCollapsed = false;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

0 commentaires
1
votes

Bien que je suis d'accord avec les autres réponses ici à propos de ne pas utiliser JQuery, si vous allez l'utiliser avec Bootstrap, ou une autre bibliothèque dépend dessus, vous devez charger JQuery premier .

Donc, pour résoudre votre problème, simplifiez la dépendance de la jQuery au-dessus de la dépendance de bootstrap.

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail