如何使用SystemJS在Angular2应用程序中加载bootstrap.js，jQuery和其他模块

Question

我是angular2，npm和systemjs的新手，我无法弄清楚如何加载和使用下载的node_modules。 假设我想先加载jQuery然后再加载bootstrap。 我修改了我的systemjs但是有一些错误......

错误：

（索引）：21错误：错误：Bootstrap的JavaScript需要jQuery（...）（匿名函数）@（索引）：21ZoneDelegate.invoke @ zone.js：323Zone.run @ zone.js：216（匿名函数）@ zone.js ：571ZoneDelegate.invokeTask @ zone.js：356Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js：426（index）：20错误：ReferenceError：模块未定义（...）

的index.html

<!doctype html>
<html>
  <head>
    <base href="/"/>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
      System.import('jQuery').catch(function(err){ console.error(err); });
      System.import('bootstrap').catch(function(err){ console.error(err); });
    </script>
    <!--<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
  </head>
  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>
</html>

systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs',
    'jQuery':                     'node_modules/jQuery/lib/node-jquery.js',
    'bootstrap':                  'node_modules/bootstrap/dist/js/bootstrap.min.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' }
  };
  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)

;

Answer 1

以下是如何使用systemjs加载jquery和bootsts＃

安装

npm install --save-dev bootstrap jquery

在systemjs.config.js中添加主文件

'bootstrap':                  'node_modules/bootstrap/dist/js/bootstrap.min.js',
'jquery':                     'node_modules/jquery/dist/jquery.js'

在main.ts中的项目中使用它

import "jquery";
import  "bootstrap";

如何使用SystemJS在Angular2应用程序中加载bootstrap.js，jQuery和其他模块

问题描述

1 个解决方案

解决方案1
11 已采纳 2016-08-26 06:33:06

安装

在systemjs.config.js中添加主文件

在main.ts中的项目中使用它

那就是你的构建中有jquery和bootstrap

源代码

如何使用SystemJS在Angular2应用程序中加载bootstrap.js，jQuery和其他模块

问题描述

1 个解决方案

解决方案1 11 已采纳 2016-08-26 06:33:06

安装

在systemjs.config.js中添加主文件

在main.ts中的项目中使用它

那就是你的构建中有jquery和bootstrap

源代码

解决方案1
11 已采纳 2016-08-26 06:33:06