Bootstrap 4 avec Angular 4 navbar

Question

J'ai créé une application Angular 4, et je voulais utiliser Bootstrap 4 avec.

J'ai installé le Bootstrap 4.0.0-beta6 via npm, et je voulais utiliser le modèle de démarrage qui devrait ressembler à ceci.

Je l'ai placé tout en conséquence à un angular.cli.json qui ressemble à ceci:

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "frontend" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
     "styles.css" 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/popper.js/dist/esm/popper.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "src/tsconfig.spec.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json", 
     "exclude": "**/node_modules/**" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
} 

Quand je fais ng build ou ng serve je suis pas d'erreur ou que ce soit, et je peux charger la page.

Cependant navbar est tout cassé vers le bas, et ressemble à ceci:

Lorsque je visite la page, je ne vois aucune erreur, et je peux appeler les classes.

J'ai également volontairement ignoré NgBootstrap, puisque je voulais d'abord utiliser les bibliothèques natives.

Et avant de demander ici, j'ai même essayé les versions MaxCDN de CSS et JS, et j'ai les mêmes résultats.

Et ma structure de code ressemble à ceci.

index.html contient <app-component> - qui charge le <app-body> qui contient simplement <app-navigation> et le reste du récipient. (Rien d'extraordinaire).

Je ne sais pas si quelqu'un a rencontré le même problème.

Toute aide ou suggestion serait la bienvenue.

Answer 1

Votre problème est le chemin d'importation de popper.js bibliothèque, changer son chemin d'accès à

../node_modules/popper.js/dist/umd/popper.min.js