從/Scripts/app.modules.js加載/ng2-bootstrap/alert.js爲「ng2-bootstrap/alert」出錯

Question

我一直未能通過研究錯誤找到解決方案Error loading/ng2-bootstrap/alert.js從/Scripts/app.modules.js中作爲「ng2-bootstrap/alert」。

我在System.config.js嘗試這些建議的解決方案，但他們不解決這個問題：

map: { 

1. 'ng2-bootstrap': 'node_modules/ng2-bootstrap' or 
2. 'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js' 

} 

packages: { 

1. 'ng2-bootstrap': { defaultExtension: 'js' }, 
2. 'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, 

} 

This is my **System.config.js** which I have read is likely the source of the issue. 

    (function (global) { 

    window.System.config({ 

     paths: { 
      // paths serve as alias 
      'npm:': '/libs/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: '/Scripts', 
      // 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 
      'rxjs': 'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'moment': 'node_modules/moment/moment.js', 
      'ng2-bootstrap': 'node_modules/ng2-bootstrap' 
     }, 
     // packages tells the System loader how to load when no filename and/or 
    no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ng2-bootstrap': { format: 'cjs', main: 
    'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, 
      'moment': { main: 'moment.js', defaultExtension: 'js' } 
     } 
    }); 
    var ngBootstrapPackageNames = [ 
     'accordion', 
     'alert', 
     'bundles', 
     'buttons', 
     'carousel', 
     'collapse', 
     'dropdown', 
     'esm', 
     'modal', 
     'pagination', 
     'popover', 
     'progressbar', 
     'rating', 
     'tabset', 
     'timepicker', 
     'tooltip', 
     'typeahead', 
     'util' 
    ]; 

    function ngBootstrapPackIndex(pkgName) { 
     //packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = { main: 
    'index.js', defaultExtension: 'js' }; 
    } 
    ngBootstrapPackageNames.forEach(ngBootstrapPackIndex); 

    })(this); 

This is my **app.module.ts** which has been implied but does not seem to help. 

    import { NgModule } from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { FormsModule } from '@angular/forms'; 
    import { HttpModule } from '@angular/http'; 

    import { AppRoutingModule } from './app.routing'; 
    import { AppComponent } from './app.component'; 
    import { CollapsiblePanelComponent } from 
    './bootstrap- components/collapsiblePanel.component'; 
    import { InputGroupAddOnComponent } from 
    './bootstrap-components/input-group-addon.component'; 
    import { CreateRegimenComponent } from 
    './create-regimen/create-regimen.component' 
    import { AlertComponent } from 'ng2-bootstrap/alert'; 
    import { CollapseModule } from 'ng2-bootstrap/collapse'; 
    import Approuting = require("./app.routing"); 

    //import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 


    @NgModule({ 
    imports: [ 
     CollapseModule, 
     AlertComponent, 
     FormsModule, 
     HttpModule, 
     // InMemoryWebApiModule.forRoot(InMemoryDataService), 
     AppRoutingModule, 
     BrowserModule], 
    declarations: [ 
     AppComponent, 
     CollapsiblePanelComponent, 
     InputGroupAddOnComponent, 
     CreateRegimenComponent, 
     CollapseModule 
    ], 
    bootstrap: [ 
     AppComponent, 
     CollapsiblePanelComponent, 
     AlertComponent, 
     CollapseModule 
    ] 
    }) 

    export class AppModule { } 

這是我Packages.json我在那裏讀了「@ NG- bootstrap/ng-bootstrap「：」^ 1.0.0-alpha.20「，是正確的語法。這也沒有幫助。

{ 
     "version": "1.0.0", 
     "name": "aspnet", 
     "private": true, 
     "scripts": { 
     "postinstall": "typings install", 
     "typings": "typings" 
    }, 
    "dependencies": { 
    "@angular/common": "~2.1.0", 
    "@angular/compiler": "~2.1.0", 
    "@angular/core": "~2.1.0", 
    "@angular/forms": "~2.1.0", 
    "@angular/http": "~2.1.0", 
    "@angular/platform-browser": "~2.1.0", 
    "@angular/platform-browser-dynamic": "~2.1.0", 
    "@angular/router": "~3.1.0", 
    "@angular/upgrade": "~2.1.0", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", 
    "@types/core-js": "^0.9.35", 
    "@types/reflect-metadata": "0.0.5", 
    "angular-in-memory-web-api": "~0.1.5", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "jquery": "^3.1.1", 
    "moment": "^2.17.1", 
    "ng2-bootstrap": "^1.3.3", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.39", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
     "@types/jquery": "^2.0.40", 
     "gulp": "^3.9.1", 
     "gulp-clean": "^0.3.2", 
     "gulp-concat": "^2.6.0", 
     "gulp-tsc": "^1.2.0", 
     "gulp-typescript": "^2.13.6", 
     "path": "^0.12.7", 
     "typescript": "^2.0.3", 
     "typings": "^1.4.0", 
     "webpack": "^2.2.1" 
     } 
    } 

Here is my node_modules directory

如何獲得ng2_bootstrap沒有錯誤404

Answer 1

我終於想通了如何加載NG2的自舉加載。對於那些試圖做到這一點的人來說，有很多很多建議都不起作用，至少在2017年2月27日之前是如此。所以對於任何人來說，這是非常令人沮喪的。 這是我以某種方式從衆多建議拼湊在一起我找到了。最重要的建議來自於ng2-bootstrap自己。 （儘管ng2-bootstrap也不完整）。

System.js

(function (global) { 
window.System.config({ 
paths: { 
// paths serve as alias 
'npm:': '/libs/', 
'ng2-bootstrap/ng2-bootstrap': "node_modules/ng2-bootstrap/ng2-bootstrap" 
}, 
// map tells the System loader where to look for things 
map: { 
// our app is within the app folder 
app: '/Scripts', 
// 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 
'rxjs': 'npm:rxjs', 
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
// ng2-bootstrap 
**'moment': 'node_modules/moment', 
'ng2-bootstrap': 'node_modules/ng2-bootstrap'** 
}, 
// packages tells the System loader how to load when no filename and/or no extension 
packages: { 
app: { 
main: './main.js', 
defaultExtension: 'js' 
}, 
rxjs: { 
defaultExtension: 'js' 
}, 
'angular2-in-memory-web-api': { 
main: './index.js', 
defaultExtension: 'js' 
}, 
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, 
'moment': { main: 'moment.js', defaultExtension: 'js' } 
} 
}); 
})(this); 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { Routes, RouterModule } from '@angular/router'; 

import { appComponents as AppComponents, appRoutes as AppRoutes } from './app.routing'; 
import { AppComponent } from './app.component'; 
import { **ButtonsModule, DatepickerModule, AlertModule** } from **'ng2-bootstrap';** 

import Approuting = require("./app.routing"); 

@NgModule({ 
imports: [ 
FormsModule, 
HttpModule, 
// InMemoryWebApiModule.forRoot(InMemoryDataService), 
RouterModule.forRoot(AppRoutes), 
AlertModule.forRoot(), 
DatepickerModule.forRoot(), 
ButtonsModule.forRoot(), 
BrowserModule], 
declarations: [ 
AppComponent, 
IndexComponent, 
IndexPatientsComponent 
], 
providers: [], 
bootstrap: [ 
AppComponent 
] 
}) 

export class AppModule { }