Библиотека Angular 6 с использованием начальной загрузки

Question

Я создаю угловую библиотеку в угловом проекте, используя особенность угловой библиотеки 6 https://github.com/angular/angular-cli/wiki/stories-create-library

Я создаю несколько повторно используемых компонентов, которые можно повторно использовать в моих проектах ... например, компонент имени, номер телефона и т. Д. Я создал компоненты .. но я не уверен, как включить bootstrap в библиотечные проекты? Проекты, которые используют мою библиотеку, установят загрузчик, я думаю ... Как мне подойти к этому?

Речь идет не о том, как добавить загрузчик в приложение Angular. Это непросто, и я ищу мнение о том, как добавить его в библиотеку Angular ... Должен ли я упаковать его в свою библиотеку или это должна быть взаимозависимость? Если это зависимость от сверстника, как мне это сделать?

Мне нужно также использовать некоторые миксины из начальной загрузки в проекте библиотеки. Как получить их в проекте библиотеки?

Answer 1

Я думаю, что многие из ответов здесь пропустили, что вопрос был НЕ о том, как добавить начальную загрузку в угловое приложение.Именно о том, как добавить загрузчик в пользовательскую угловую библиотеку .Не уверен, что вы уже нашли решение, но это то, что сработало для меня.

1. Добавить загрузчик в peerDependencies разделе project/your-library/package.json, например,

{
    "name": "your-library",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
        "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
        <b>"bootstrap": "^4.3.1"</b>
    }
}

Это установит загрузчик, когда ваша библиотека используется как зависимость в другом проекте.

Создайте файл .scss (например, your-component.scss) на том же уровне, что и ваш компонент в библиотеке, и получите следующую строку:

@import "node_modules/bootstrap/scss/bootstrap"

В вашем компоненте укажите файл .scss, созданный на шаге 2, как styleUrls, например,

@Component({
    selector: 'your-lib',
    templateUrl: './your-component.html',
    <b>styleUrls: ['./your-component.scss']</b>
})
export class YourComponent {

    ....

}

Добавьте начальную загрузку в раздел devDependencies верхнего уровня package.json проекта, содержащего вашу библиотеку.Это позволит вам использовать начальную загрузку при разработке библиотеки

npm install в корне проекта

ng build your-library в проектеroot

Answer 2

Если вы используете ng-packagr, вы можете использовать приведенный ниже процесс, которому я следовал.

Я добавил стили в styleIncludedPaths файла ng-package.json, как показано ниже.

"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"
    ]
  }

Answer 3

Я не знаю, отвечает ли он на ваш вопрос, но сначала вы должны добавить загрузчик к зависимостям равноправных элементов вашей библиотеки, после этого во всех ваших проектах, использующих эту библиотеку, вы должны включить стили начальной загрузки в глобальные стили в angular.json.

---

После этого вы можете использовать классы начальной загрузки из шаблонов в вашей библиотеке, и вы можете быть уверены, что стили будут применены. Кроме того, если вы хотите использовать миксины или переменные из начальной загрузки, вы можете просто импортировать необходимые файлы начальной загрузки scss в файлы ваших компонентов в библиотеке, например:

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

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

Во время сборки все эти импортированные файлы scss будут скомпилированы и встроены в выходные файлы вашей библиотеки.

---

Существуют и другие способы включения стилей в библиотеку, но все они требуют перехвата / расширения процесса сборки библиотеки.

Answer 4

Вы можете просто установить обычный загрузчик с помощью команды ниже

npm i bootstrap

Тогда, поскольку вы используете Angular 6, вам понадобится файл angular.json и @ angular-devkit / build-angular, а не angular-cli.json. Установите devkit с помощью команды ниже

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

и добавьте эту строку кода в раздел «architect» в «build» и в «options», вам нужно разместить ссылки на стиль. Я привел пример ниже.

"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"
          ]
        }
      }
    }

Я рекомендую обратиться к документации по специфике devkit и конфигурации angular.json

Answer 5

Когда вы доставляете свою библиотеку, вы должны добавить начальную загрузку как peerDependency к package.json:

 "peerDependencies": {
    "ngx-bootstrap": ">=<MIN-VERSION> <MAX-VERSION",
  }

Из-за peerDependencies, когда кто-то устанавливает вашу библиотеку, ngx-bootstrap будет установлен автоматически, если ее нет. Если установлена ​​неправильная версия, пользователь вашей библиотеки получает предупреждение.

Вот еще немного информации: http://npm.github.io/using-pkgs-docs/package-json/types/peerdependencies.html

Answer 6

1) вы можете установить напрямую, используя

npm install bootstrap

и чем в вашем угловом поле вы можете включить его, используя

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

2) вы также можете использовать ngx-bootstrap, это поможет вам во многих компонентах ввода

npm install ngx-bootstrap