如何在.NET内核中设置ng2-bootstrap

Question

我曾尝试在一个用Angular2 .NET核心模板(here is more info about that)创建的项目中安装引导程序，但我无法让它工作，该项目编译并运行正常，但NG2-bootstrap的组件根本不起作用。

这是我的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"
  }
}

我的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 {
}

最后是我尝试用来实现它的组件的html

<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>

和TS：

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

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

export class NavMenuComponent {
}

这个想法是让ng2-bootstrap中的下拉菜单工作。

Answer 1

我也在我当前的项目中使用Angular2 .NET核心模板，我也有同样的问题。我认为问题出在1.4.2版本上，因为几周前我在另一个项目中使用了1.3.0版本，它工作得很好。

我的配置方法与您相同，但我在systemjs.config.js中添加了两行代码：

'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);

浏览器控制台出错：

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 ……}