我试图通过
https://github.com/ng-bootstrap/ng-bootstrap将引导模块添加到我的ng2应用程序.
但是所有的时间得到这个错误：
但是所有的时间得到这个错误：
这是我的索引文件,也许我的文件有一些错误？
index.html的：
<html>
<head>
<title>MyApplication</title>
<Meta charset="UTF-8">
<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">-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-Metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/@ng-bootstrap/ng-bootstrap"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. display the application -->
<body>
<app>Loading...</app>
</body>
</html>
完整的systemjs.config
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(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/ng2-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',};
var ngPackageNames = [
'common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router','router-deprecated','upgrade',];
// 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' };
}
// 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);
解决方法
我遇到过同样的问题.基本上你需要告诉你的systemjs.config在哪里可以找到ng-bootstrap的所有单个组件.
基于ulubeyn的答案,我将以下内容添加到基本的systemjs.config中：
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app','@angular': 'node_modules/@angular','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','@ng-bootstrap/ng-bootstrap': {main: 'index.js',defaultExtension: 'js'}
};
var ngPackageNames = [
'common',];
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);
详细：
>将’@ ng-bootstrap / ng-bootstrap’：’node_modules / @ ng-bootstrap / ng-bootstrap’添加到你的地图上.这将为您的ng-bootstrap提供一条路径.
>将’@ ng-bootstrap / ng-bootstrap’：{main：’index.js’,defaultExtension：’js’}添加到您的包中.
>添加一个提供所有ng-bootstrap组件文件夹的新数组(参见上面例子中的ngBootstrapPackageNames).
>现在通过将这些信息添加到地图中并将其与相应的索引文件相关联,将所有内容都集合到一起：
function ngBootstrapPackIndex(pkgName) {
packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js',defaultExtension: 'js'};
}
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
我希望这有助于,因为它适用于我的这些变化.
ng-bootstrap alpha 5的更新
如果您使用alpha 5,请将包变量中的@ ng-bootstrap / ng-bootstrap映射更改为此;
var packages = {
...,'@ng-bootstrap/ng-bootstrap': {main: '/bundles/ng-bootstrap.js',...
}