Ошибка при загрузке ngs-boostrap с использованием angular2

Я пытаюсь создать меню, используя выпадающий компонент из ng2-boostrap. При доступе к индексу я получаю эту ошибку:

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)

Шаги до сих пор:

1) npm установить ng2-bootstrap --save. Папка ng2-bootstrap была создана в node_modules

2) на app.module.ts я пробовал как с Ng2BootstrapModule, так и с DropdownModule по отдельности

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DropdownModule } from 'ng2-bootstrap/components/dropdown';

 @NgModule({
 imports: [ BrowserModule, Ng2BootstrapModule or DropdownModule ]....

3) на моем шаблоне html

 <div class="dropdown" dropdown>
    <button class="btn btn-primary" dropdown-open>My Heroes</button>
        <ul class="dropdownMenu">
        <li><a href="#">Badman</a></li>
        <li><a href="#">Sadman</a></li>
        <li><a href="#">Lieman</a></li>
        </ul>
</div>

Я попробовал демо на https://valor-software.com/ng2-bootstrap/#/dropdownsно результат тот же.

4)package.json в зависимостях есть как moment так и ng2-boostrap

"moment": "^2.15.1",
"ng2-bootstrap": "^1.1.5",

Может ошибка могла быть на пути ng2-boostrap, Уже пробовал с тегом

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

Ошибка исчезла, но стиль выпадающего списка по-прежнему не загружается. Браузер отображает кнопку и список отдельно. И в демонстрациях, и в быстром запуске этот тег не упоминается, так что я все равно думаю, что это неправильно.


angular ng2-bootstrap
person Rafael Krüger Tavares    schedule 30.09.2016    source источник
comment
Я тоже столкнулся с этой проблемой. Я просто сделал альтернативу и добавил ссылку на загрузку в свой файл index.html <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">, а затем последовал учебнику по загрузке css.   -  person Bean0341    schedule 30.09.2016
comment
вам нужно настроить эту библиотеку в вашем systemjs.config.js   -  person longbow    schedule 01.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Есть следующие шаги:

1) Установите пакеты ng2-bootstrap и moment:

npm install ng2-bootstrap moment --save

2) Настроить systemjs.config.js

map: {
  ...
  'ng2-bootstrap': 'npm:ng2-bootstrap',
  'moment': 'npm:moment/moment.js'
},
packages: {
  ...
  'ng2-bootstrap': {
    defaultExtension: 'js'
  }
}

3) Импортируйте DropdownModule в свой модуль:

import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  imports:      [ BrowserModule, DropdownModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Вы также можете использовать Ng2BootstrapModule вместо этого

4) Добавьте ссылку bootstrap css в свой index.html.

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

5) Используйте его в своем html-шаблоне, например (внимательно проверьте):

<div class="dropdown" dropdown>
  <button class="btn btn-primary" dropdownToggle>My Heroes</button>
  <ul class="dropdown-menu">
    <li><a href="#">Badman</a></li>
    <li><a href="#">Sadman</a></li>
    <li><a href="#">Lieman</a></li>
  </ul>
</div>

Готовый пример вы можете увидеть на планкере.

person yurzui    schedule 01.10.2016
comment
Благодарю. Я забыл поместить объявление пакетов в systemjs.config.js. - person Rafael Krüger Tavares; 03.10.2016