web-dev-qa-db-fra.com

angular2-cli donne l'erreur @multi styles

J'ai récemment utilisé angular2-cli et créé un nouveau projet. Je voulais utiliser bootstrap dans mon projet et j'ai donc installé bootstrap, puis je voulais importer le fichier css bootstrap comme indiqué dans le guide angular2-cli ici. https://github.com/angular/angular-cli#global-library-installation Après avoir exécuté ng serve, le message d'erreur suivant s'affiche.

ERREUR dans les styles multiples Module non trouvé: Erreur: Impossible de résoudre le problème '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' dans '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @ multi styles

Qu'est-ce que je fais mal ?

Informations sur la version angular2-cli

krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64
cssangularstylesangular2-cli
5
codestruggle

Ajoutez ../ avant le chemin.

Dans angular-cli.json,

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]
8
Noopur Dabhi

Dans Angular 7, le fichier s'appelle 'angular.json'.

Assurez-vous que vous avez le bon jeu d'extensions pour l'option "styles" . Dans mon cas, j'ai installé la CLI Angular avec l'option SCSS mais l'extension a été définie par défaut comme SASS.

       "styles": [
          "src/styles.scss" // default was: src/styles.sass
        ],

 enter image description here

4
atfede

J'utilise Angular 6 donc mon nom de fichier est angular.json, mais j'ai pu résoudre le problème similaire en supprimant le chemin "../" qu'il demandait . Voici ma configuration. pour ajouter bootstrap et jquery à mon application angulaire.

   "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": ["../node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

Note: pour jQuery j'avais besoin de "../" alors que bootstap n'en avait pas besoin.

Remplacez par des problèmes que j'ai eu: 

    "styles": [
          "src/styles.css", 
          "../node_modules/bootstrap/dist/css/bootstrap.css"
       ],
    "scripts": [
          "../node_modules/jquery/dist/jquery.js", 
          "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

En outre, cet article contient plusieurs options alternatives pour le définir.

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

4
Roger Perez

Dans mon cas, l'erreur était parce que j'avais 

    "styles":[
      "styles.css"
    ]

dans mon .angular-cli.json

je l'ai résolu en tapant manuellement le chemin de tous mes SCRIPTS et CSS ..i.e par exemple

    "styles":[
      "styles/bootstrap.scss",
      "styles/app.scss",
     ]

Les chemins dans angular-cli.json sont relatifs à la racine du projet (src/normalement). Par exemple, vous avez le fichier src/styles.css, mais dans angular-cli.json, il est répertorié uniquement sous le nom styles.css.

1
Felix Runye

donne le chemin comme "./node_modules/bootstrap/dist/css/bootstrap.min.css" pas comme "../node_modules/bootstrap/dist/css/bootstrap.min.css"

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]
1
Sundeep

donnez le chemin comme "./node_modules/bootstrap/dist/css/bootstrap.min.css" pas comme "../ noeud_modules/bootstrap/dist/css/bootstrap.min.css"

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]
1
Sundeep

voici le correctif pour moi . dans votre répertoire courant vous avez un fichier caché appelé .angular-cli.json ouvrez-le et changez le "style.sass" en "style.css: run ng construire et vous avez terminé.

AVANT:  enter image description here APRÈS:  enter image description here

0
grepit

La solution ci-dessous a fonctionné pour moi, car il semble y avoir un bogue dans bootstrap 4.0:

npm uninstall bootstrap --save

puis installez 

npm install [email protected] --save
0
user2181047