Angularアプリにng-boostrapを追加すると、HTMLコントロールに何の影響もありません

Question

最近Angularアプリでng-bootstrapをasp.net mvcに追加しようとしました。 私はng-bootstrapの手順に従っており、動作させることができません。コントロールは普通のhtmlのように見えます（私はng-boostrapを全く使わなかったのと同じように） 助けていただければ幸いです。

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

systemjs.config.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': '/node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      'app': '/src/app', 

      // angular bundles 
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
      'tslib': 'npm:tslib/tslib.js', 
      'bootstrap':     'node_modules/bootstrap/dist/js/bootstrap.min.js', 
      'jquery':      'node_modules/jquery/dist/jquery.js', 

      '@progress': 'npm:@progress', 
      '@telerik': 'npm:@telerik' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       defaultExtension: 'js', 
       meta: { 
        './*.js': { 
         loader: '/src/systemjs-angular-loader.js' 
        } 
       } 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

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

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent {} 

app.component.html

<div class="row"> 
    <div class="col"> 
     <h1>Angular</h1> 
     <div ngbDropdown class="d-inline-block"> 
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button> 
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1"> 
       <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> 
</div> 

Answer 1

ng-bootstrap documentationによると、あなたはあなたのプロジェクトにbootstrap.min.jsとjQueryを含めるべきではありませんので、

それは必要ではなく、ng-bootstrapコードを妨げる可能性があります。

しかし、主な問題は、あなたのアプリケーションモジュールの宣言にNgbdDropdownBasicが含まれていなかったということです。

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { NgbdDropdownBasic } from './dropdown-basic'; // this 

@NgModule({ 
    imports: [BrowserModule, BrowserAnimationsModule, NgbModule.forRoot()], 
    declarations: [ AppComponent, NgbdDropdownBasic ], // and this 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

各NG-ブートストラップエンティティが個別に含まれなければなりません。 Datepickerを使用したいですか？ NgbdDatepickerBasicなどを含む...