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

Как добавить загрузку в проект 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, например)

4b9b3361

ОТВЕТЫ

Ответ 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, вам следует выполнить следующие действия:

  1. Установите ngx-bootstrap и bootstrap: 

    npm install ngx-bootstrap bootstrap --save

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

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

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

  2. Откройте angular-cli.json (для angular6 и более поздних версий имя файла изменилось на angular.json) и вставьте новую запись в массив styles:

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

  3. Откройте 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

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

    нг новый AngularBootstrapTest

  2. Переместить в каталог проекта

    cd AngularBootstrapTest

  3. Скачать загрузчик

    npm установить загрузчик

  4. Добавить 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

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

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

,

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

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

  1. сохранить файл

  2. запустить проект

    нг служить --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

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

  1. npm install --save bootstrap

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

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

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

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

Ответ 11

  1. Установить загрузчик

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

  1. Последнее добавление bootstrap.css в ваш код style.scss

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

  2. Перезагрузите ваш локальный сервер

Ответ 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

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

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

  1. В 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

  1. Установите 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. enter image description here

Ответ 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. В моем случае я также хотел переопределить переменные начальной загрузки.