Как установить bootstrap 4 + jquery + popper.js с Angular 6 - PullRequest
Новая
       17

Как установить bootstrap 4 + jquery + popper.js с Angular 6

0 голосов
/ 05 мая 2018

Я установил и обновил Angular и Node до последней версии 

    Angular CLI: 6.0.0
    Node: 8.11.1
    OS: win32 x64
    Angular: 6.0.0
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

     Package                                                                   
     -----------------------------------------------------------
    @angular-devkit/architect         0.6.0
    @angular-devkit/build-angular     0.6.0
    @angular-devkit/build-optimizer   0.6.0
    @angular-devkit/core              0.6.0
    @angular-devkit/schematics        0.6.0
    @ngtools/webpack                  6.0.0
    @schematics/angular               0.6.0
    @schematics/update                0.6.0
    rxjs                              6.1.0
    typescript                        2.7.2
    webpack                           4.6.0

Установил Bootstrap 4 через npm, и он работает, хотя выпадающие списки и модалы не работают, потому что jquery и popper.js не импортируют так, как это было в angular 5.

Вот что я сделал: Установлено следующее 1- npm установить bootstrap @ далее --save 2- npm установить jquery - сохранить 3- npm установить popper.js --save

и добавил это в angular.json, потому что нет angular.cli.json 

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

1 Ответ

0 голосов
/ 10 мая 2018

Не забудьте запустить: 

npm i tether --save

Далее в angular.json поместите путь привязки между jquery и bootstrap 

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