angular folks最近发布了angular2 final version.2
每件事都很好但是systemjs.config.js破了。我看了他们的官方快速启动和angular2核心库的固定配置,但ng-bootstrap配置仍然被打破。以为有人在这里可以帮助我
我正在获得404
http://localhost:8080/my-proj/node_modules/%40ng-bootstrap/ng-bootstrap/ 404(未找到)
以下是我的systemjs.config.js
(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
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'@ng-bootstrap': 'npm:@ng-bootstrap',
'@ng-bootstrap/ng-bootstrap':'npm:@ng-bootstrap/ng-bootstrap',
'@ng-bootstrap/accordion':'npm:@ng-bootstrap/ng-bootstrap/accordion',
'@ng-bootstrap/alert': 'npm:@ng-bootstrap/ng-bootstrap/alert',
'@ng-bootstrap/bundles': 'npm:@ng-bootstrap/ng-bootstrap/bundles',
'@ng-bootstrap/buttons': 'npm:@ng-bootstrap/ng-bootstrap/buttons',
'@ng-bootstrap/carousel': 'npm:@ng-bootstrap/ng-bootstrap/carousel',
'@ng-bootstrap/collapse': 'npm:@ng-bootstrap/ng-bootstrap/collapse',
'@ng-bootstrap/dropdown': 'npm:@ng-bootstrap/ng-bootstrap/dropdown',
'@ng-bootstrap/esm': 'npm:@ng-bootstrap/ng-bootstrap/esm',
'@ng-bootstrap/modal': 'npm:@ng-bootstrap/ng-bootstrap/modal',
'@ng-bootstrap/pagination': 'npm:@ng-bootstrap/ng-bootstrap/pagination',
'@ng-bootstrap/popover': 'npm:@ng-bootstrap/ng-bootstrap/popover',
'@ng-bootstrap/progressbar': 'npm:@ng-bootstrap/ng-bootstrap/progressbar',
'@ng-bootstrap/rating': 'npm:@ng-bootstrap/ng-bootstrap/rating',
'@ng-bootstrap/tabset': 'npm:@ng-bootstrap/ng-bootstrap/tabset',
'@ng-bootstrap/timepicker': 'npm:@ng-bootstrap/ng-bootstrap/timepicker',
'@ng-bootstrap/tooltip': 'npm:@ng-bootstrap/ng-bootstrap/tooltip',
'@ng-bootstrap/typeahead': 'npm:@ng-bootstrap/ng-bootstrap/typeahead',
'@ng-bootstrap/util': 'npm:@ng-bootstrap/ng-bootstrap/util',
},
// 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'
}
}
});
})(this);
我以前的配置适用于角度rc.6如下
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'@ng-bootstrap': 'node_modules/@ng-bootstrap',
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap'
};
// 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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'upgrade'
];
var ngBootstrapPackageNames = [
'accordion',
'alert',
'bundles',
'buttons',
'carousel',
'collapse',
'dropdown',
'esm',
'modal',
'pagination',
'popover',
'progressbar',
'rating',
'tabset',
'timepicker',
'tooltip',
'typeahead',
'util'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
function ngBootstrapPackIndex(pkgName) {
packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.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);
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
答案 0 :(得分:6)
如更改日志中所述
https://github.com/ng-bootstrap/ng-bootstrap/compare/1.0.0-alpha.4...1.0.0-alpha.5
如果您使用的是SystemJS,则应将配置调整为 指向UMD捆绑包。
所以我想你应该使用如下所示的配置:
'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
<强> Plunker Example 强>