如何通过system.js将Bootstrap添加到Angular2中

Question

如何通过system.js将Bootstrap添加到Angular2中

angularng-bootstrap

11

我正试图通过https://github.com/ng-bootstrap/ng-bootstrap将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', 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);

- Yaroslav Polubedov

似乎您没有设置SystemJS配置。 - rzelek

我创建了systemjs.config。 - Yaroslav Polubedov

Post it in your answer. - rzelek

我添加了我的systemjs.config。 - Yaroslav Polubedov

2个回答

4

您的systemjs文件应该如下所示：

var ngBootstrapMap = {
    '@ng-bootstrap/ng-bootstrap': '../lib/@ng-bootstrap/ng-bootstrap' //change the path according to your project structure
}

var ngBootstrapPackages = {
    '@ng-bootstrap/ng-bootstrap': { main: 'index.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) {
    ngBootstrapPackages['@ng-bootstrap/ng-bootstrap/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);

var ngBootstrapConfig = {
    map: ngBootstrapMap,
    packages: ngBootstrapPackages
};

System.config(ngBootstrapConfig);

基本上，它会在@ng-bootstrap/ng-bootstrap文件夹中查找index.js文件，并且对于每个组件，它会在@ng-bootstrap/ng-bootstrap/{componentName}中查找index.js文件。

希望这有所帮助。

- ulubeyn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thorloph · Accepted Answer

我遇到了同样的问题。基本上，你需要告诉你的 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', // '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 的路径。
将 '@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 版本，请将 packages 变量中的 @ng-bootstrap/ng-bootstrap 映射更改为以下内容：

var packages = {
     ...,
     '@ng-bootstrap/ng-bootstrap': {main: '/bundles/ng-bootstrap.js', defaultExtension: 'js'},
     ...
}