Wie man ng2-Bootstrap in .NET Core

Question

Ich habe versucht, ng2-bootstrap in einem Projekt mit Angular2 .NET Core Vorlage (here is more info about that) eingerichtet, aber ich kann es nicht funktionieren, das Projekt kompiliert und läuft korrekt, aber Die Komponenten von ng2-bootstrap funktionieren einfach nicht.

Hier ist meine package.json:

{ 
    "name": "pined", 
    "version": "0.0.0", 
    "scripts": { 
    "test": "karma start ClientApp/test/karma.conf.js" 
    }, 
    "dependencies": { 
     "@angular/common": "^2.4.5", 
     "@angular/compiler": "^2.4.5", 
     "@angular/core": "^2.4.5", 
     "@angular/forms": "^2.4.5", 
     "@angular/http": "^2.4.5", 
     "@angular/platform-browser": "^2.4.5", 
     "@angular/platform-browser-dynamic": "^2.4.5", 
     "@angular/platform-server": "^2.4.5", 
     "@angular/router": "^3.4.5", 
     "@types/node": "^6.0.42", 
     "rxjs": "^5.2.0", 
     "zone.js": "^0.7.8", 
     "angular2-platform-node": "~2.0.11", 
     "angular2-template-loader": "^0.6.2", 
     "angular2-universal":"^2.1.0-rc.1", 
     "angular2-universal-patch": "^0.2.1", 
     "angular2-universal-polyfills": "^2.1.0-rc.1", 
     "aspnet-prerendering": "^2.0.0", 
     "aspnet-webpack": "^1.0.17", 
     "awesome-typescript-loader": "^3.0.0", 
     "css": "^2.2.1", 
     "css-loader": "^0.25.0", 
     "es6-shim": "^0.35.1", 
     "event-source-polyfill": "^0.0.7", 
     "expose-loader": "^0.7.1", 
     "extract-text-webpack-plugin": "^2.0.0-rc", 
     "file-loader": "^0.9.0", 
     "html-loader": "^0.4.4", 
     "isomorphic-fetch": "^2.2.1", 
     "jquery": "^2.2.1", 
     "json-loader": "^0.5.4", 
     "preboot": "^4.5.2", 
     "raw-loader": "^0.5.1", 
     "style-loader": "^0.13.1", 
     "to-string-loader": "^1.1.5", 
     "typescript": "^2.2.1", 
     "url-loader": "^0.5.7", 
     "webpack": "^2.2.0", 
     "webpack-hot-middleware": "^2.12.2", 
     "webpack-merge": "^0.14.1", 
     "ng2-bootstrap": "^1.4.0" 
    }, 
    "devDependencies": { 
    "@types/chai": "^3.4.34", 
    "@types/jasmine": "^2.5.37", 
    "chai": "^3.5.0", 
    "jasmine-core": "^2.5.2", 
    "karma": "^1.3.0", 
    "karma-chai": "^0.1.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-webpack": "^1.8.0" 
    } 
} 

Mein app.module.ts:

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { DropdownModule } from 'ng2-bootstrap'; 

import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { SeeAndDictateComponent } from './components/seeAndDictate/seeAndDictate.component'; 
import { SearchResultsComponent } from './components/searchResults/searchResults.component'; 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     SeeAndDictateComponent, 
     SearchResultsComponent, 
     HomeComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: 'seeAndDictate', component: SeeAndDictateComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]), 

     DropdownModule.forRoot() 
    ] 
}) 
export class AppModule { 
} 

Und schließlich die HTML-Komponente, in dem ich versuche, es

<nav class="navbar-default navbar-static-side" role="navigation"> 
    <div class="sidebar-collapse"> 

     <span dropdown (onToggle)="toggled($event)"> 
      <a href id="simple-dropdown" dropdownToggle> 
       Click me for a dropdown, yo! 
      </a> 
      <ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown"> 
       <li *ngFor="let choice of items"> 
        <a class="dropdown-item" href="#">{{choice}}</a> 
       </li> 
      </ul> 
     </span> 


     <ul class="nav metismenu" id="side-menu"> 
      <li class="nav-header"> 
       <div dropdown (onToggle)="toggled($event)" class="dropdown profile-element"> 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" dropdownToggle> 
         <span class="clear"> 
          <span class="block m-t-xs"> 
           <strong class="font-bold">Marco Antonio Melchor</strong> 
          </span> <span class="text-muted text-xs block">Implementacion de soluciones <b class="caret"></b></span> 
         </span> 
        </a> 
        <ul class="dropdown-menu animated fadeInRight m-t-xs" dropdownMenu> 
         <li><a href="#">Cerrar sesion</a></li> 
        </ul> 
       </div> 
       <div class="logo-element"> 
        IN+ 
       </div> 
      </li> 
      <li [routerLinkActive]="['link-active']" class="active"> 
       <a href="#"><i class="fa fa-eye-large"></i> <span class="nav-label">Auditoria</span></a> 
       <ul class="dropdown-menu animated fadeInRight m-t-xs"> 
        <li><a [routerLink]="['/seeAndDictate']">Ver y dictaminar</a></li> 
        <li><a [routerLink]="['/seeAndDictate']">Seguimiento</a></li> 
       </ul> 
      </li> 

      <li [routerLinkActive]="['link-active']"> 
       <a [routerLink]="['/counter']"><i class="fa fa-th-large"></i> <span class="nav-label">Reportes</span> </a> 
       <ul class="dropdown-menu animated fadeInRight m-t-xs"> 
        <li><a [routerLink]="['/seeAndDictate']">Aforo/movimiento</a></li> 
        <li><a [routerLink]="['/seeAndDictate']">Aforo/Ingreso</a></li> 
        <li><hr /></li> 
        <li><a [routerLink]="['/seeAndDictate']">Dictaminaciones por usuario</a></li> 
       </ul> 
      </li> 
     </ul> 

    </div> 
</nav> 

zu implementieren

Und der TS:

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

@Component({ 
    selector: 'nav-menu', 
    templateUrl: './navmenu.component.html', 
    styleUrls: ['./navmenu.component.css'] 
}) 

export class NavMenuComponent { 
} 

Die Idee ist es, das Dropdown-Menü in ng2-Bootstrap zu arbeiten.

Answer 1

Ich benutze auch Angular2 .NET Core-Vorlage in meinem aktuellen Projekt und ich habe das gleiche Problem. Ich denke, das Problem ist mit der Version 1.4.2, weil ich die Version 1.3.0 in einem anderen Projekt vor ein paar Wochen verwendet habe und es funktioniert gut.

ich konfiguriert es auf die gleiche Weise getan hat, aber ich habe 2 Zeilen in systemjs.config.js hinzufügen:

'moment': 'npm:moment/moment.js', 
'ng2-bootstrap/ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 

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: 'app', 

     // angular bundles 
     '@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/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', 

     // other libraries 
     'moment': 'npm:moment/moment.js', 
     'ng2-bootstrap/ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
     'rxjs': 'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     } 
    } 
}); 
})(this); 

Fehler in Browser-Konsole:

zone.js:2019 GET http://localhost:3000/ng2-bootstrap 404 (Not Found) 
ZoneAwareError {__zone_symbol__error: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-bootstrap 
Error: XHR ……}