使用角度 2 加载 ngx-bootstrap 时出错

Question

我正在尝试使用 ng2-boostrap 的下拉组件创建一个菜单。访问索引时出现此错误：

加载资源失败：服务器返回状态 404（未找到）

到目前为止的步数：

1) npm 安装 ng2-bootstrap -- 保存。文件夹 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>

错误消失了，但下拉菜单的样式仍然没有加载。浏览器分别呈现按钮和列表。在演示和快速入门中没有提到标签，所以我猜它是错误的。

Answer 1

有以下步骤：

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 link 添加到您的 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>

所以你可以在the Plunker

上看到完整的例子

使用角度 2 加载 ngx-bootstrap 时出错

Error on load ngs-boostrap using angular2

ng2-bootstrap

angular