web-dev-qa-db-fra.com

Angular 6 Library using bootstrap

Je crée une bibliothèque angular dans un projet angular en utilisant angular 6 fonctionnalité de bibliothèque https://github.com/angular/angular-cli/wiki/stories-create-library

Je crée quelques composants réutilisables via celui-ci qui peuvent être réutilisés dans mes projets .. quelque chose comme un composant de nom, un composant de numéro de téléphone, etc. J'ai créé les composants .. mais je ne sais pas comment inclure bootstrap dans les projets de la bibliothèque? Les projets qui consomment ma bibliothèque installeront bootstrap Je suppose ... Comment dois-je procéder?

Ce n'est pas sur la façon d'ajouter bootstrap à Angular application .. Ceci est différent et je cherche un avis sur la façon d'ajouter à Angular Bibliothèque ... Devrait Je l'ai empaqueté avec ma bibliothèque ou Doit-il s'agir d'une dépendance entre pairs? Si c'est une dépendance entre pairs, comment dois-je procéder?

Je dois également utiliser des mixins de bootstrap dans le projet de bibliothèque. Comment les obtenir dans le projet de bibliothèque?

angularbootstrap-4
12
Janier

Je ne sais pas si cela répond à votre question, mais vous devez d'abord ajouter bootstrap à vos dépendances de pairs de bibliothèque, après cela, dans tous vos projets qui utilisent cette bibliothèque, vous devez inclure des styles bootstrap à styles globaux dans angular.json.

Après cela, vous pouvez utiliser les classes bootstrap à partir des modèles de votre bibliothèque et vous pouvez être sûr que les styles seront appliqués. De plus, si vous souhaitez utiliser des mixins ou des variables de bootstrap, vous pouvez simplement importer les fichiers scss bootstrap nécessaires dans les fichiers scss de vos composants dans la bibliothèque, comme ceci:

@import "~bootstrap/scss/bootstrap-grid";

@include media-breakpoint-up(sm) {
    .some-class {
      display: block;
    }
}

Pendant la construction, tous ces fichiers scss importés seront compilés et intégrés dans les fichiers de sortie de votre bibliothèque.

Il existe d'autres façons d'inclure des styles dans la bibliothèque, mais toutes nécessitent l'interception/l'extension du processus de construction de la bibliothèque.

0
Amir Arbabian

Vous pouvez simplement installer normal bootstrap avec la commande ci-dessous

npm i bootstrap

Ensuite, puisque vous utilisez Angular 6, vous aurez besoin d'un fichier angular.json et du @ angular-devkit/build-angular, pas angular-cli.json. Installez le devkit avec la commande ci-dessous

npm i @angular-devkit/build-angular --save-dev

et ajoutez cette ligne de code dans la section "architecte" sous "build" et dans "options" vous devez placer les références de style. J'ai donné un exemple ci-dessous.

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "public",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "preserveSymlinks": true,
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"],
      },
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": false,
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
        },
        "local": {
          "assets": [
            "src/favicon.ico"
          ]
        }
      }
    }

Je recommande de se référer aux documents sur les spécificités autour de devkit et la configuration angular.json

0
Ben Brown

Si vous utilisez ng-packagr, vous pouvez utiliser le processus ci-dessous que j'ai suivi.

J'ai ajouté les styles dans styleIncludePaths de ng-package.json comme indiqué ci-dessous.

"lib": {
    "entryFile": "src/public_api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/assets/styles",
      "../../node_modules/bourbon/app/assets/stylesheets",
      "../../node_modules/bourbon-neat/app/assets/stylesheets",
      "../../node_modules/bootstrap/dist/css"
    ]
  }
0
Eeshwar Ankathi