1

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 を自動的にロードする必要があります。私はここで間違っていますか？マッピングを追加する場所が見つかりません。他の誰かが angular-cli 1.0.0-beta で ng-bootstrap を使用できました。18?

4

1 に答える 1