使用 ng-bootstrap 和 angular-cli 1.0.0-beta.18答案

【问题标题】：Using ng-bootstrap with angular-cli 1.0.0-beta.18使用 ng-bootstrap 和 angular-cli 1.0.0-beta.18
【发布时间】：2017-03-19 09:49:31
【问题描述】：

我正在使用 angular-cli 1.0.0-beta。 18 并尝试使用 https://ng-bootstrap.github.io/#/getting-started 的指导线加载 ng-bootstrap

步骤：

使用安装 ng-bootstrap

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

将以下内容添加到 app.module.ts

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

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

对于我的 ibox-tools.module.ts 我有

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {IboxToolsComponent} from "./ibox-tools.component.ts";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    declarations: [IboxToolsComponent],
    imports     : [NgbModule, BrowserModule],
    exports     : [IboxToolsComponent],
})

export class IboxToolsModule {}

然后我尝试在 ibox-tools.template.html 中使用 ngbDropdown 模块

<div class="col-xs-6">
        <div ngbDropdown class="d-inline-block">
            <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <button class="dropdown-item">Action - 1</button>
                <button class="dropdown-item">Another Action</button>
                <button class="dropdown-item">Something else is here</button>
            </div>
        </div>
    </div>

但是 ngbDropdown 不起作用。我没有收到任何错误，包括 bootstrap4.css 等。

入门指南告诉我使用

map: {
  '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}

如果我使用 SystemJS，但我认为不是这样，因为 angular-cli 1.0.0-beta。 18 正在使用 Webpack，应该会自动加载 ng-bootstrap。我在这里错了吗？我找不到应该添加映射的任何地方，其他人设法将 ng-bootstrap 与 angular-cli 1.0.0-beta 一起使用。 18 岁？

【问题讨论】：

发生了什么？你实际上并没有描述一个问题，只是它“不起作用”。这到底是什么意思呢？你是如何添加 css 的？
AFAIK，Bootstrap Dropdown 使用 JS 钩子。因此，如果没有包含所需的 JS，它会导致非功能性/静态下拉菜单在控制台中没有任何错误消息。
@peeskillet 问题更像是“如何使用 angular-cli 1.0.0-beta 添加第三方库。 18 与 webpack？在您可以在 systemjs 配置文件中添加映射以导入 @ng-bootstrap/ng-bootstrap 之前，但现在我认为它应该在使用 webpack 时自动加载。我还需要在其他任何地方添加映射吗？在 index.html 中使用 maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/…> 正常加载 css，但看起来并没有实际加载 ng-bootstrap 库..
您是否尝试在 IboxToolsModule 中添加 NgbModule.forRoot()？
我也有同样的问题，我已经从工作正常的 beta.14 升级到了 beta.18，当你点击它时，NgbDropdown 只是不起作用，而不是下拉效果。我一直在使用 NgbDropdownModule.forRoot() 但也尝试过 NgbModule.forRoot()

标签： angular angular-cli ng-bootstrap

【解决方案1】：

对不起，我的错。我仍在学习 angular2，问题是我将 ibox-tools.component.ts 包含在另一个模块中，而不是 ibox-tools.module.ts 需要，所以我错过了在 ibox-tools.module.ts 中导入的辅助模块的 ng-bootstrap ;)

所以 webpack 工作得很好，不需要像使用 systemjs 那样进行映射。

希望你能理解我的回答，如果不只是问，我可以尝试更好地解释。

【讨论】：