2017-04-20 6 views
0

Angular2アプリケーションにng2-bootstrapをロードする際に問題があります。 私はsystemjs.config.jsを使ってlibsを読み込みます。 私のローカルマシンでは、この設定は正常に動作し、私はすべてのlibファイルを私のアプリケーションにロードすることができます。しかし、サーバーに移動すると、ng2-bootstrapは動作を停止します。 誰かが私にこれを助けることができますか?Angular2のSystemjs.config.jsにng2-bootstrapをロードできません

私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 { } 
:私は、以下を参照してくださいしてください...これはほぼ2日で

を苦労してきました

私のビューファイル

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

答えて

0

パッケージに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' }; 
    } 
} 
+0

私はそれらのどれもが作業していない、方法の両方を試してみました。別の方法がありますか?私のローカルマシンでは、これらの3つの方法はすべて私のためにうまくいきます... – Mathers

+0

@Mathersあなたのサーバーにng2-bootstrapをインストールしましたか?また、私は自分のgithubに、 'moment.js'のshoudもsystemjs.config.jsにインストールして設定するという問題があると述べました。 – Pengyy

+0

私はそうではありませんでした。私は 'npm install - save moment'をしなければなりませんか? – Mathers

関連する問題