2016-07-05 24 views
0

已嘗試不同的方法。仍然有仍ng2-bootstrap顯示在角2中的404(未找到)

錯誤GET http://localhost:8080/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js 404(未找到)

錯誤:錯誤XHR(404未找到)裝載http://localhost:8080/node_modules/ng2-bootstrap/ng2-bootstrap.js(...)

這是我的index.html:

<html> 
<head> 
<title>Angular 2 TypeScript Gulp QuickStart</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<!-- Polyfill(s) for older browsers --> 
<script src="lib/es6-shim/es6-shim.min.js"></script> 
<script src="lib/zone.js/dist/zone.js"></script> 
<script src="lib/reflect-metadata/Reflect.js"></script> 
<script src="lib/systemjs/dist/system.src.js"></script> 
<!--ng2-bootstrap--> 
<script src="../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script> 
<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<!--ng-bootstrap--> 
<!--<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>--> 
<script> 
    System.import('app') 
      .then(null, console.error.bind(console)); 
</script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html> 

這裏是systemjs.config.js:

(function (global) { 

// map tells the System loader where to look for things 
var map = { 
    'app': 'app', // 'dist', 
    'rxjs': 'lib/rxjs', 
    '@angular': 'lib/@angular', 
    'ng2-bootstrap': 'node_modules/ng2-bootstrap', 
    moment: 'node_modules/moment/moment.js' 
}; 

// packages tells the System loader how to load when no filename and/or no extension 
var packages = { 
    'app': {main: 'main.js', defaultExtension: 'js'}, 
    'rxjs': {defaultExtension: 'js'}, 
    'ng2-bootstrap': {defaultJSExtensions: true} 
}; 

var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade' 
]; 

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
packageNames.forEach(function (pkgName) { 
    packages[pkgName] = {main: 'index.js', defaultExtension: 'js'}; 
}); 

var config = { 
    map: map, 
    packages: packages 
}; 

// filterSystemConfig - index.html's chance to modify config before we register it. 
if (global.filterSystemConfig) { 
    global.filterSystemConfig(config); 
} 

System.config(config); 

})(this); 

here是app.component.ts的 部分:

//datepicker 
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 
+0

我發現了一個問題:我已經搬到「時刻」和「NG2的自舉/組件」文件夾和NG2-bootstrap.js爲構建/ lib文件夾。所以現在至少我沒有得到errorrs和datepicker。 – Serhiy

+0

鏈接被破壞 – Tonechas

+0

只是一個注意,ng2-bs被重命名爲ngx-bootstrap – valorkin

回答

0

打開

systemjs.config.js

添加此路徑:

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

地圖對象

+0

它只能在將它改爲'@ ng-bootstrap':'npm:@ ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js' – SalientBrain

+0

問題與ngx-bootstrap有關;) – valorkin

1
  1. 打開systemjs.config.js文件

  2. 添加這種 'NG2的自舉': 'node_modules/NG2的自舉/捆綁/ NG2-bootstrap.umd.js',地圖對象

3.adding此進口{DatepickerModule}從 'NG2的自舉';app.module.ts文件固定我的問題,希望它有助於