ES6 -- importing of es5 files

Question

I try to use this (https://github.com/gocardless/es6-angularjs/blob/master/README.md) as a starting point and then include the bootstrap javascript code. In order to open a modal

But the only thing that happens is:

Potentially unhandled rejection [3] Error loading "components/bootstrap/dist/js" at http://localhost:3010/components/bootstrap/dist/js.js
Error loading "components/bootstrap/dist/js" from "app-compiled/bootstrap" at http://localhost:3010/app-compiled/bootstrap.js
Not Found: http://localhost:3010/components/bootstrap/dist/js.js (WARNING: non-Error used)

I added this to the main.js:

import 'bootstrap-js';
//TODO please explain to me why not working

and this to the loader.config.js file:

System.config({
  meta: {

    ...,
    'components/bootstrap/dist/js':{ format: 'global', export: 'bootstrap'}


  },
  map: {

    ....,
    'bootstrap-js': 'components/bootstrap/dist/js'

  }
});

alexpods · Accepted Answer · 2015-01-21T10:24:27.823

1

Try exports instead of export here:

System.config({
    meta: {
    //...
        'components/bootstrap/dist/js':{ format: 'global', exports: 'bootstrap'}
    }
    //...
});

When your write { format: 'global', exports: 'bootstrap'} you're trying to get global bootstrap variable. But such does not exists. So I think you must remove meta line and fix map. Result must be look like:

System.config({
    meta: {
        //...
        'components/path/to/jquery': { format: 'global', exports: 'jQuery' },
        'components/bootstrap/dist/js/bootstrap': { deps: ['jquery'] }
    }
    map: {
        //...
        'jquery': 'components/path/to/jquery',
        'bootstrap-js': 'components/bootstrap/dist/js/bootstrap'
    }
});

edited Jan 21 '15 at 10:24

answered Jan 20 '15 at 17:26

alexpods

47,475
10
100
94

Still does not seem to work I even tried to put in the exact path like: /components/bootstrap/dist/js/bootstrap.min.js ----> https://www.dropbox.com/sh/igta72ltvuk90m8/AAD9Pdku4aXET2sifBscJ6mxa?dl=0 – Georg Heiler Jan 20 '15 at 23:52
@geoHeil Well, I think I understand your problem. When your write `{ format: 'global', exports: 'bootstrap'}` you're trying to get global `bootstrap` variable. But such does not exists – alexpods Jan 21 '15 at 00:03
Hi, this seems to be correct: now I get: Potentially unhandled rejection [2] Error evaluating http://localhost:3010/components/bootstrap/dist/js/bootstrap.js Uncaught Error: Bootstrap's JavaScript requires jQuery (WARNING: non-Error used) – Georg Heiler Jan 21 '15 at 08:03
@geoHeil I think you must add jquery to your package and specify dependency to bootstrap. So I updated the answer. I hope this will help. – alexpods Jan 21 '15 at 10:25

ES6 -- importing of es5 files

1 Answers1