Как добавить загрузку в проект angular -cli

Мы хотим использовать bootstrap 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular -cli 1.0.0-beta.5 (w/node v6.1.0).

После загрузки бутстрапа и его зависимостей с npm наш первый подход заключался в добавлении их в angular-cli-build.js:

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

и импортируйте их в наш index.html

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Это отлично работало с ng serve, но как только мы создали сборку с флагом -prod, все эти зависимости исчезли из dist/vendor (сюрприз!).

Как мы планируем обрабатывать такой сценарий (т.е. загружать сценарии начальной загрузки) в проекте, созданном с помощью angular -cli?

У нас были следующие мысли, но мы действительно не знаем, куда идти...

используйте CDN? но мы предпочитаем обслуживать эти файлы, чтобы гарантировать, что они будут доступны.
скопировать зависимости dist/vendor после нашего ng build -prod? Но это похоже на что-то angular -cli должно обеспечить, поскольку оно "заботится" о части сборки?
добавить jquery, bootstrap и tether в src/system-config.ts и каким-то образом вложить их в наш пакет в main.ts? Но это казалось неправильным, учитывая, что мы не будем явно использовать их в нашем коде приложения (в отличие от moment.js или что-то вроде lodash, например)

Ответы

Ответ 1

ВАЖНОЕ ОБНОВЛЕНИЕ: ng2-bootstrap теперь заменен на ngx-bootstrap

ngx-bootstrap поддерживает Angular 3 и 4.

Обновление: 1.0.0-beta.11-webpack или более поздние версии

Прежде всего, проверьте версию angular-cli с помощью следующей команды в терминале:

ng -v

Если ваша версия angular-cli превышает 1.0.0-beta.11-webpack, вам следует выполнить следующие действия:

Установите ngx-bootstrap и bootstrap:
```
npm install ngx-bootstrap bootstrap --save
```

Эта строка устанавливает Bootstrap 3 в настоящее время, но может установить Bootstrap 4 в будущем. Помните, что ngx-bootstrap поддерживает обе версии.

Откройте src/app/app.module.ts и добавьте:

import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
... 
})

Откройте angular-cli.json (для angular6 и более поздних версий имя файла изменилось на angular.json) и вставьте новую запись в массив styles:
```
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
```
Откройте src/app/app.component.html и добавьте:
```
<alert type="success">hello</alert>
```

1.0.0-бета .10 или ниже:

И, если ваша версия angular-cli имеет версию 1.0.0-beta.10 или ниже, вы можете использовать следующие шаги.

Сначала перейдите в каталог проекта и введите:

npm install ngx-bootstrap --save

Затем откройте свой angular-cli-build.js и добавьте следующую строку:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Теперь откройте свой src/system-config.ts и напишите:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

... и:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Ответ 2

Поиск ключевого словa > Установка глобальной библиотеки на https://github.com/angular/angular-cli поможет найти ответ.

В соответствии с их документом вы можете сделать следующие шаги, чтобы добавить библиотеку Bootstrap.

Сначала установите Bootstrap из npm:

npm install [email protected]

Затем добавьте необходимые файлы script в приложения [0].scripts в файле angular -cli.json:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

Наконец добавьте Bootstrap CSS в приложение [0].styles array:

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

Перезапустите ng-службу, если вы ее запустите, и Bootstrap 4 должен работать над вашим приложением.

Это лучшее решение. Но если вы не перезапустите ng-службу, это никогда не будет работать. Настоятельно рекомендуется выполнить это последнее действие.

Ответ 3

Сделайте следующее:

npm i [email protected] --save

Это добавит загрузчик 4 в ваш проект.

Затем перейдите к src/style.scss или src/style.css (выберите тот, который вы используете) и импортируйте туда загрузчик:

Для style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Для style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Для сценариев вам все равно придется добавить файл в файл angular-cli.json следующим образом (в Angular версии 6 это редактирование необходимо выполнить в файле angular.json):

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Ответ 4

Сначала вы должны установить tether, jquery и bootstrap с помощью этих команд

npm i -S tether
npm i -S jquery
npm i -S [email protected]

После добавления этих строк в ваш файл angular-cli.json(angular.json начиная с версии 6)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Ответ 5

Так как никто не упоминал официальную (angular -cli команду) историю о том, как включить Bootstrap еще: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Включить Bootstrap

Bootstrap - популярная структура CSS, которая может использоваться в проекте Angular. Это руководство проведет вас через добавление бутстрапа в проект Angular CLI и его настройку для использования начальной загрузки.

Использование CSS

Начало работы

Создайте новый проект и перейдите в проект

ng new my-app
cd my-app

Установка Bootstrap

Когда новый проект будет создан и готов, вам потребуется установить bootstrap в ваш проект как зависимость. Используя параметр --save, зависимость будет сохранена в package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install [email protected] --save

Настройка проекта

Теперь, когда проект настроен, он должен быть настроен для включения бутстрапа CSS.

Откройте файл .angular-cli.json из корня вашего проекта.
В свойстве apps первым элементом в этом массиве является приложение по умолчанию.
Существует свойство styles, которое позволяет применять внешние глобальные стили к вашему приложению.
Укажите путь к bootstrap.min.css

После выполнения этого он должен выглядеть следующим образом:

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

Примечание.. При внесении изменений в .angular-cli.json вам нужно будет заново запустить ng serve, чтобы получить изменения конфигурации.

Проект тестирования

Откройте app.component.html и добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

При настройке приложения запустите ng serve, чтобы запустить приложение в режиме разработки. В браузере перейдите к приложению localhost:4200. Убедитесь, что кнопка стиля загрузочного стиля отображается.

Использование SASS

Начало работы

Создайте новый проект и перейдите в проект

ng new my-app --style=scss
cd my-app

Установка Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install [email protected] --save

Настройка проекта

Создайте пустой файл _variables.scss в src/.

Если вы используете bootstrap-sass, добавьте следующее в _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

В styles.scss добавьте следующее:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Проект тестирования

Откройте app.component.html и добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

При настройке приложения запустите ng serve, чтобы запустить приложение в режиме разработки. В браузере перейдите к приложению localhost:4200. Убедитесь, что кнопка стилируется. Чтобы убедиться, что ваши переменные используются, откройте _variables.scss и добавьте следующее:

$brand-primary: red;

Верните браузер, чтобы изменить цвет шрифта.

Ответ 6

Обновление v1.0.0-beta.26

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

Если он все еще не работает, перезапустите команду ng serve

версии 1.0.0 или ниже:

В вашем файле index.html вам просто нужна ссылка bootstrap css (без скриптов js js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

npm install ng2-bootstrap --save
npm install moment --save

После установки ng2-bootstrap в my_project/src/system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

И в my_project/angular -cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Не забывайте эту команду для размещения вашего модуля в поставщике:

ng build

для импорта из другого модуля, который является тем же самым принципом.

Ответ 7

Я думаю, что вышеупомянутые методы изменились после релиза, проверьте эту ссылку

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

инициировать проект

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

установить ng-bootstrap и bootstrap

npm install ng2-bootstrap bootstrap --save

открыть файл src/app/app.module.ts и добавить

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

откройте angular -cli.json и вставьте новую запись в массив стилей

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

открыть файл src/app/app.component.html и проверить все работы, добавив

<alert type="success">hello</alert>

Ответ 8

Шаги для Bootstrap 4 в угловых 5

Создать проект Angular 5

нг новый AngularBootstrapTest
Переместить в каталог проекта

cd AngularBootstrapTest
Скачать загрузчик

npm установить загрузчик
Добавить Bootstrap в проект

4.1 открыть .angular-cli.json

4.2 найти раздел "стили" в json

4.3 добавьте путь начальной загрузки css, как показано ниже

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

Теперь вы успешно добавили загрузчик CSS в проекте Angular 5

Тестовый бутстрап

откройте src/app/app.component.html
добавить компонент начальной загрузки

<button type="button" class="btn btn-primary">Primary</button>

Вы можете ссылаться на стили кнопок здесь (https://getbootstrap.com/docs/4.0/components/buttons/)

сохранить файл
запустить проект

нг служить --open

Теперь вы увидите кнопку стиля начальной загрузки на странице

Примечание: если вы добавили путь начальной загрузки после ng serve, вы должны остановить и повторно запустить ng serve, чтобы отразить изменения

Ответ 9

Так как это стало настолько запутанным, и ответы здесь полностью смешаны, я просто предлагаю пойти с официальной командой ui-team для BS4 (да, так много таких репозиций для NG-Bootstrap.

Просто следуйте инструкциям здесь https://github.com/ng-bootstrap/ng-bootstrap, чтобы получить BS4.

Цитата из lib:

Эта библиотека создается с нуля командой ui-bootstrap. Мы используют TypeScript и нацеливаются на фреймворк Bootstrap 4. CSS.

Как и в случае с Bootstrap 4, эта библиотека работает. пожалуйста, проверьте наш список вопросов, чтобы увидеть все, что мы реализуем. Чувствовать свободно комментировать там.

Просто скопируйте вставку, что там для этого:

npm install --save @ng-bootstrap/ng-bootstrap

После установки вам нужно импортировать наш основной модуль:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Единственная оставшаяся часть - это список импортированного модуля в вашем прикладном модуле. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, похожий на (обратите внимание на NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Другие модули в вашем приложении могут просто импортировать NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Это, по-видимому, наиболее устойчивое поведение

Ответ 10

Сделайте следующие шаги:

npm install --save bootstrap
А в вашем .angular-cli.json добавьте в раздел стилей:

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

После этого вы должны перезапустить свою нг подачу

наслаждаться

Ответ 11

Установить загрузчик
```
 npm install [email protected]
```

2.Добавьте код в .angular-cli.json:

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

Последнее добавление bootstrap.css в ваш код style.scss
```
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
```
Перезагрузите ваш локальный сервер

Ответ 12

Попробуйте это

npm install [email protected]

https://github.com/angular/angular-cli#global-library-installation

Ответ 13

Вы также можете посмотреть это видео от Майка Брочи, у которого есть полезная информация о том, как добавить бутстрап в ваш проект Angular -Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (около минут 13:00)

Ответ 14

Запуск в bash npm install ng2-bootstrap bootstrap --save
Добавить/изменить следующее в angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Ответ 15

Откройте команду Terminal/command в соответствующем каталоге проекта и введите следующую команду.

npm install --save bootstrap

Затем откройте файл .angular-cli.json, найдите

"styles": [ "styles.css" ],

измените это на

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

Все сделано.

Ответ 16

Теперь с новой версией ng-bootstrap 1.0.0-beta.5 поддерживается большинство родных директив Angular на основе разметки Bootstrap и CSS.

Единственная зависимость, необходимая для работы с этим, - bootstrap. Нет необходимости использовать jquery и popper.js.

ng-bootstrap - полностью заменить реализацию JavaScript для компонентов. Поэтому вам не нужно включать bootstrap.min.js в раздел сценариев в вашем .angular-cli.json.

выполните следующие шаги, когда вы интегрируете bootstrap с сгенерированным проектом с последней версией angular -cli.

Inculde bootstrap.min.css в разделе .angular-cli.json, styles.

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

Установите ng-bootstrap.

npm install --save @ng-bootstrap/ng-bootstrap

Добавьте это в свой основной класс модуля.
```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
```
Включите следующее в раздел импорта основного модуля.
```
@NgModule({
   imports: [NgbModule.forRoot(), ...],
})
```
Сделайте также следующее в своем модуле (-ах), если вы собираетесь использовать компоненты ng-bootstrap внутри этих классов модулей.
```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
   imports: [NgbModule, ...],
})
```
Теперь ваш проект готов использовать доступные компоненты ng-bootstrap.

Ответ 17

Установите загрузчик, popper.js

npm install --save bootstrap npm install --save popper.js

В src/styles.css импортируйте стиль начальной загрузки

@import '~bootstrap/dist/css/bootstrap.min.css';

Ответ 18

angular-cli теперь имеет специальную страницу wiki, где вы можете найти все, что вам нужно. TL;DR, установите bootstrap через npm и добавьте ссылку стилей в раздел "стили" в файле .angular-cli.json

Ответ 19

Рабочий пример в случае использования angular -cli и css:

1.install bootstrap

npm установка загрузочного троса jquery --save

2.add to.angular-cli.json

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

Ответ 20

установить boostrap с помощью npm

npm install [email protected] --save

затем проверьте папку node_modules для файла boostrap.css(в пределах dist), обычно путь

"../node_modules/bootstrap/dist/css/bootstrap.css",

добавить этот путь | import boostrap в стиле style.css или style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "[email protected]/material/prebuilt-themes/indigo-pink.css // angular material theme

что он.

Ответ 21

Установите Bootstrap с помощью npm
```
npm install bootstrap
```

2. Установите Popper.js

npm install --save popper.js

3.Goto angular.json в проекте Angular 6/.angular-cli.json в Angular 5 и добавьте следующее:

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Ответ 22

Шаг 1:
npm install [email protected] --save-dev Это установит последнюю версию начальной загрузки, однако указанную версию можно установить, добавив номер версии

Шаг 2: Откройте styles.css и добавьте следующий @import "~bootstrap/dist/css/bootstrap.css"

Ответ 23

Для добавления Bootstrap и Jquery оба

npm install [email protected] jquery --save

после выполнения этой команды, пожалуйста, продолжайте и проверьте папку node_modules, в которой вы сможете увидеть загрузчик и jquery.

Ответ 24

Рабочий пример в случае использования angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Работает для CSS и SCSS. Bootstrap v3 и v4 доступны.

Более подробную информацию о схемах начальной загрузки смотрите здесь.

Ответ 25

Установите загрузчик с помощью npm я --save [email protected] Теперь перейдите в папку nodemodules и из папки bootstrap скопируйте путь к "bootstrap.min.css.js" и вставьте полный путь (например, nodemodules/bootstrap/css/bootstrap.min.css.js) в angular.json в angular.json тега сценария и перезапустите сервер, чтобы проверить, прошла ли установка успешно, запустите программу в любом браузере и нажмите F12, и вы увидите, что часть окна открывается Теперь перейдите на вкладку "Элементы" и откройте тег "head", и если вы видите загрузочный тег в теге style, то ваша установка прошла успешно.

Ответ 26

Запустите следующую команду внутри проекта

npm install --save @[email protected]

и если вы получите подтверждение, как это

+ [email protected]
updated 1 package in 8.245s

Это означает, что boostrap 4 успешно установлен. Однако для его использования вам необходимо обновить массив "styles" в файле angular.json.

Обновите его следующим образом, чтобы программа начальной загрузки смогла переопределить существующие стили.

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

Чтобы убедиться, что все настроено правильно, запустите ng serve > open browser at http://localhost:4200/or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, тогда вы можете использовать boostrap.

Ответ 27

Неважно, какую платформу JS вы используете, импортировать загрузчик в ваш проект легко, выполнив 2 шага ниже:

Установите npm я -S bootstrap загрузку, используя npm я -S bootstrap или yarn add bootstrap.

В styles.css или styles.scss импортируйте загрузчик как @import '~bootstrap/dist/css/bootstrap.min.css'.

Ответ 28

Просто добавьте эти три строки в тег Head в index.html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ответ 29

Не видел этого здесь:

@import 'bootstrap/scss/bootstrap.scss';

Я только добавил эту строку в style.scss. В моем случае я также хотел переопределить переменные начальной загрузки.