Question

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

处的guidline加载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？

Answer 1

对不起，我的不好。我还在学习angular2，问题是我将ibox-tools。组件 .t包含在另一个模块中，而不是ibox-tools。模块 .ts这是必需的，所以我错过了在ibox-tools.module.ts中导入的辅助模块的ng-bootstrap;）

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

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

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

1 个答案: