如何通过system.js将引导程序添加到Angular2 [英] How can I add bootstrap to Angular2 via system.js
问题描述
我正尝试通过 https://github将引导程序模块添加到ng2应用程序中. com/ng-bootstrap/ng-bootstrap . 但是所有的时间都会出现此错误:
I'm trying to add bootstrap module to my ng2 application with by https://github.com/ng-bootstrap/ng-bootstrap. But all time getting this error:
这是我的索引文件，也许我的文件有错误? index.html:
It's my index file, maybe I have some mistake in my file? 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
full 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', defaultExtension: '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的所有单个组件.
I had the same issue. Basically you need to tell your systemjs.config where to find all the single components of ng-bootstrap.
基于ulubeyn的答案，我在基本的systemjs.config中添加了以下内容:
Based on the Answer of ulubeyn, I added the following to the basic 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/@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',
'router-deprecated',
'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);
详细信息:
-
将
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap'添加到您的地图.这将为您提供ng-bootstrap的路径.
Add
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap'to your map. This will provide a path to your ng-bootstrap.
将'@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }添加到您的包裹中.
添加一个新数组，提供所有ng-bootstrap组件文件夹(请参见上例中的ngBootstrapPackageNames).
Add a new array providing all ng-bootstrap component folders (see ngBootstrapPackageNames in the above example).
现在，通过将这些信息添加到地图中并将其与相应的索引文件相关联，将所有信息整合在一起:
Now bring everything together by adding those informations to your map, and associating it with the corresponding index files:
function ngBootstrapPackIndex(pkgName) {
packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
}
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
我希望这会有所帮助，因为它可以为我带来这些变化.
I hope this helps, as it works with those changes for me.
更新了ng-bootstrap alpha 5
如果您使用的是alpha 5，请将packages变量中的@ng-bootstrap/ng-bootstrap映射更改为此；
If you are using alpha 5, change @ng-bootstrap/ng-bootstrap mapping in packages variable to this;
var packages = {
...,
'@ng-bootstrap/ng-bootstrap': {main: '/bundles/ng-bootstrap.js', defaultExtension: 'js'},
...
}
这篇关于如何通过system.js将引导程序添加到Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
