无法在Angular2的Systemjs.config.js中加载ng2-bootstrap

Question

我在加载ng2-bootstrap到我的Angular2应用程序时遇到问题。 我使用systemjs.config.js加载库。 在我的本地机器中，这个配置工作正常，我可以将每个lib文件加载到我的应用程序中。但是，一旦我移动到服务器，ng2-bootstrap停止工作.... 有人可以帮助我吗？我一直在努力与此差不多2天... ...

请参阅以下内容：

我systemjs.config.js

var isPublic = typeof window != "undefined"; 

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 
    '@angular':     (isPublic)? 'libs/@angular' : 'node_modules/@angular', 
    'rxjs':      (isPublic)? 'libs/rxjs' : 'node_modules/rxjs', 
    'ng2-table':     (isPublic)? 'libs/ng2-table' : 'node_modules/ng2-table', 
    'ng2-bootstrap':    (isPublic)? 'libs/ng2-bootstrap' : 'node_modules/ng2-bootstrap', 
    'socket.io-client':   (isPublic)? 'libs/socket.io-client/dist/socket.io.min.js' : 'node_modules/socket.io-client/dist/socket.io.min.js' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    // 
    // 'ng2-bootstrap':    { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' } 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'ng2-table':     { format: 'cjs', main: 'ng2-table.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    'animations', 
    '' 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    if(pkgName === '') { 
     packages['ng2-bootstrap/'] = { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' } 
    } else { 
     packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this); 

我app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import { HttpModule }  from '@angular/http'; 
import { Ng2TableModule } from 'ng2-table/ng2-table'; 
import {ModalModule, PaginationModule, ProgressbarModule, TabsModule, DatepickerModule} from 'ng2-bootstrap'; 


import { AppComponent } from './app.component'; 
import { routing }  from './app.routing'; 

import { ModuleSectionComponent } from './components/workflow/jobtemplate/job-wrapper.component'; 
import { WorkspaceService } from './services/workspace.service'; 
import { WorkflowService } from './services/workflow.service'; 
import { UserService } from './services/user.service'; 
import { JobService } from './services/job.service'; 
import {WorkSpaceModal} from "./components/workspace/workspacemodal"; 
import {ModuleOptDirective} from './components/directive/workflow.directive'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule, 
    Ng2TableModule, 
    PaginationModule.forRoot(), 
    ModalModule.forRoot(), 
    routing, 
    ProgressbarModule.forRoot(), 
    TabsModule.forRoot(), 
    DatepickerModule.forRoot() 
    ], 
    declarations: [ 
    AppComponent, 
    ModuleSectionComponent 
    ], 
    providers: [ 
    WorkspaceService, 
    WorkflowService, 
    UserService, 
    JobService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

我的观点文件

{{!< default}} 
{{#contentFor "scripts"}} 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="libs/core-js/client/shim.min.js"></script> 
    <script src="libs/zone.js/dist/zone.js"></script> 
    <script src="libs/reflect-metadata/Reflect.js"></script> 
    <script src="libs/systemjs/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
{{/contentFor}} 

<!-- 3. Display the application --> 
    <my-app><br><br><center> 
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> 
    <span class="sr-only">Loading...</span></center></my-app> 

Answer 1

您没有将ng2-bootstrap添加到包中。 请执行下列选项之一：

选项1：

var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'ng2-table':     { format: 'cjs', main: 'ng2-table.js', defaultExtension: 'js' }, 
    'ng2-bootstrap':    { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' } 
    'rxjs':      { defaultExtension: 'js' } 
}; 

选项2：

var ngPackageNames = [ 
    ... 
    'ng2-bootstrap' 
]; 

// Bundled (~40 requests): 
function packUmd(pkgName) { 
    if(pkgName === 'ng2-bootstrap') { 
    packages['ng2-bootstrap'] = { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' } 
    } else { 
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
}