These are chat archives for systemjs/systemjs

21st
Apr 2016
Mahendra Tyagi
@mahendratyagi
Apr 21 2016 07:02
Hi Ravencrow i think you would require to import the country module in your app
Ludovic Pénet
@lpenet
Apr 21 2016 19:16
Hi

I do not quite understand how to configure systemjs to leverage bundles...

I have the following setup in index.html :

   <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script type="text/javascript" src="node_modules/primeui/primeui-ng-all.js"></script>
    <script src="app/resources/js/moment.js"></script>
    <script src="app/resources/js/fullcalendar.js"></script>
    <script src="app/resources/js/jquery.ui.touch.js"></script>


    <script src="node_modules/rxjs/bundles/Rx.js"></script>

<!-- prod
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
-->
<!-- dev -->
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>


    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
          defaultJSExtensions: true,
          map: {
            rxjs: 'node_modules/rxjs', //or wherever you have it installed
            primeng: 'node_modules/primeng',
            "angular2": 'node_modules/angular2',
            "angular2-jwt": "node_modules/angular2-jwt",
            "jquery": "node_modules/jquery/dist/jquery"
          },
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
         },
         primeng: {
             format: 'cjs',
             defaultExtension: 'js'
         }
       }
      });
      System.import('app/boot')
      .then(null, console.error.bind(console));
    </script>

It is of course in head.

When I track http queries using chrome developper tools, I can see that despite the fact that I sourced RxJS bundles and angular bundles, (many many) individual source files, mostly from Angular 2 and RxJS are queried.

What should I do ?

Carl Cui
@CarlCui
Apr 21 2016 19:52
@lpenet that's unusual. Like angular2.dev.js should only be queried once. What source files are you talking about?
Ludovic Pénet
@lpenet
Apr 21 2016 20:21
(sorry for being away, baby crying...)
For instance angular2/router.js
Carl Cui
@CarlCui
Apr 21 2016 20:24
router is indeed a separate file from angular2.js
but you said many many?
Ludovic Pénet
@lpenet
Apr 21 2016 20:25
But I already included the router bundle
Yep, it is like the bundle are just ignored.
Carl Cui
@CarlCui
Apr 21 2016 20:27
you mean <script src="node_modules/angular2/bundles/router.dev.js"></script>?
Ludovic Pénet
@lpenet
Apr 21 2016 20:27
Yep
Carl Cui
@CarlCui
Apr 21 2016 20:28
Then the app sends a request to get router.dev.js?
That's normal
Ludovic Pénet
@lpenet
Apr 21 2016 20:29
My problem is not with querying router.dev.js. This is perfectly normal. It is that, later, it also request angular2/router.js
And many many other sources files, that are normally bundled.
Carl Cui
@CarlCui
Apr 21 2016 20:36
systemjs doesn't bundle all your source files to a single file, if that's what you are wondering.
Ludovic Pénet
@lpenet
Apr 21 2016 20:36
@CarlCui I understand your question. I am not trying to bundle my app (will do that later). I am trying to use vendor bundles.
Carl Cui
@CarlCui
Apr 21 2016 20:38
can you get a screenshot of the queries?
Ludovic Pénet
@lpenet
Apr 21 2016 20:39
Well, I just get 10x of get queries of individual files agregated in the bundles...
For instance : node_modules/angular2/core.js
Carl Cui
@CarlCui
Apr 21 2016 20:39
wow
Ludovic Pénet
@lpenet
Apr 21 2016 20:40
node_modules/angular2/src/facade/math.js
This message was deleted
Carl Cui
@CarlCui
Apr 21 2016 20:41
same as rxjs, right? all operator files and stuff?
Ludovic Pénet
@lpenet
Apr 21 2016 20:41
Exactly.
Carl Cui
@CarlCui
Apr 21 2016 20:45
map: {
            rxjs: 'node_modules/rxjs', //or wherever you have it installed
            primeng: 'node_modules/primeng',
            "angular2": 'node_modules/angular2',
            "angular2-jwt": "node_modules/angular2-jwt",
            "jquery": "node_modules/jquery/dist/jquery"
          },
Thomas Sieverding
@Bajix
Apr 21 2016 20:45
Uggh use JSPM
Carl Cui
@CarlCui
Apr 21 2016 20:45
So I think the problem could be the mapping you added. It points to a directory, not a file @lpenet
Ludovic Pénet
@lpenet
Apr 21 2016 20:46
You think I should map to the bundles ?
Carl Cui
@CarlCui
Apr 21 2016 20:47
@lpenet You don't need them, actually. Like angular2.dev.js is a systemjs module.
jquery might be different
Ludovic Pénet
@lpenet
Apr 21 2016 20:47
I agree. If it works ok, I do not need them for rxjs and angular2 (and most certainly primeng)
Carl Cui
@CarlCui
Apr 21 2016 20:47
right
Ludovic Pénet
@lpenet
Apr 21 2016 20:49
That's why I am wondering why they are not properly loaded.
Must be something simple and stupid.
Carl Cui
@CarlCui
Apr 21 2016 20:49
:smile:
Ludovic Pénet
@lpenet
Apr 21 2016 21:24
ok, after some debug, I found...
The problem is with defaultJSExtensions: true
If you do not set it, everything goes smooth
I end with :
    <script>
      System.config({
          map: {
            "angular2-jwt": "node_modules/angular2-jwt",
            "jquery": "node_modules/jquery/dist/jquery",
            "primeng": "node_modules/primeng"
          },
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js',
          },
         primeng: {
             format: 'cjs',
             defaultExtension: 'js'
         },
        jquery: {
                format: 'cjs',
                defaultExtension: 'js'
        },
        "angular2-jwt": {
                defaultExtension: 'js'
        }
        }
      });
      System.import('app/boot')
      .then(null, console.error.bind(console));
    </script>
I feel further simplifications are coming... But this will be after a good night of sleep. ;-)