app.composante.ts J'ai essayé d'ajouter des styles à la dépendance angulaire.json paquet, mais en montrant que le module n'a pas trouvé. l'ajout de deux des fichiers d'amorçage. voici la capture d'écran des deux fichiers
l'angulaire.fichier json est comme ça angulaire.fichier json
Vous utilisez Angulaire v6 pas 2
Angulaire à Partir de la v6
CLI projets angulaire à partir de 6 sera à l'aide de angular.json au lieu de .angular-cli.json pour la construction et la configuration d'un projet.
Chaque CLI espace de travail a des projets, chaque projet a des objectifs, et chaque cible peut avoir des configurations.Docs
. {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
OPTION 1
exécuter npm install bootstrap@4 jquery --save
Le JavaScript pièces d' Bootstrap dépendent jQuery. Si vous avez besoin de l' jQuery JavaScript le fichier de bibliothèque de trop.
Dans votre angulaire.json ajouter les chemins d'accès aux fichiers pour les styles et les scripts tableau en vertu de l' build de la cible
NOTE:
Avant v6 Angulaire de la CLI de configuration du projet a été stocké dans <PATH_TO_PROJECT>/.angular-cli.json. Que le v6 de l'emplacement du fichier a changé d' angular.json. Depuis il n'est plus un point, le fichier n'est plus caché par défaut et est sur le même niveau.
ce qui signifie également que les chemins de fichier dans angulaire.json ne doit pas contenir des principaux points et slash
j'.e vous pouvez fournir un chemin d'accès absolu au lieu d'un chemin d'accès relatif
En .angular-cli.json Chemin d'accès au fichier a été "../node_modules/"
En angular.json c'est "node_modules/"
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"]
},
OPTION 2
Ajouter des fichiers à partir de CDN (Content delivery Network) pour votre projet CDN LIEN
Ouvrir le fichier src/index.html et insérer
l' <link> élément à la fin de la section d'en-tête à inclure le fichier CSS de Bootstrap
un <script> élément à inclure jQuery dans le bas de la section de corps
un <script> élément à inclure Popper.js au bas de la section de corps
un <script> élément à inclure le fichier JavaScript de Bootstrap au bas de la section de corps
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="http://stackoverflow.com/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
OPTION 3
Exécuter npm install bootstrap
En src/styles.css ajoutez la ligne suivante:
@import "~bootstrap/dist/css/bootstrap.css";
OPTION 4
ng-bootstrap Il contient un ensemble de native Angulaire des directives basées sur l'Amorçage du balisage et les feuilles de style CSS. En conséquence, il ne dépend pas de jQuery ou JavaScript de Bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
Après l'Installation de l'importer dans le répertoire racine de votre module et de l'inscrire dans @NgModule des importations de tableau
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
NOTEng-bootstrap nécessite Bootstrap 4 css à ajouter dans votre projet. vous avez besoin d'Installer de façon explicite par le biais de:npm install bootstrap@4 --save
Dans votre angulaire.json ajouter les chemins d'accès aux fichiers pour les styles de tableau en vertu de l' build de la cible
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
npm install --save bootstrap
ensuite, à l'intérieur de angular.json (auparavant .angular-cli.json ) à l'intérieur du dossier racine du projet, recherchez les styles et ajoutez le fichier css de démarrage comme ceci:
pour angulaire 6
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
pour angulaire 7
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
