All geek questions in one place

How to load bootstrap.js, jQuery and other modules into an Angular2 application using SystemJS

I am new to angular2, npm and systemjs and I cannot figure out how to load and use the loaded node_modules. Let's say I want to download the first jQuery and then the boot file. I changed my system, but there are some errors ...

Error:

(index): 21 Error: error: bootable JavaScript requires jQuery (...) (anonymous function) @ (index): 21ZoneDelegate.invoke @ zone.js: 323Zone.run @ zone.js: 216 (anonymous function) @ zone .js: 571ZoneDelegate.invokeTask @ zone.js: 356Zone.runTask @ zone.js: 256drainMicroTaskQueue @ zone.js: 474ZoneTask.invoke @ zone.js: 426 (index): 20 Error: ReferenceError: module not defined (... )

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)

;

+4
1

jquery bootstrap systemjs #

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";

jquery bootstrap

+11

Source: https://habr.com/ru/post/1651436/

More articles:


All Articles