These are chat archives for systemjs/systemjs

26th
Oct 2016
Christopher Hill
@christopherhill
Oct 26 2016 05:11
I'm doing an Angular2 RC4 -> final upgrade. In my system.config.js file, I've declared a package:'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',. I need in one of my imports to be able to grab import {DomAdapter} from '@angular/platform-browser/src/dom/dom_adapter'; but I get the following error: Error on fetch for node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/src/dom/dom_adapter. Any ideas?
Kris Thomsen
@kristho91
Oct 26 2016 09:11
Hello! What is the best way to handle Angular Promises (eg in a Service) with strictNullChecks in TypeScript? What should the return type be ? :)
Jonas Kello
@jonaskello
Oct 26 2016 15:50
Is there some way to run multiple loaders on files using SystemJS? I need to first run plugin-typescript to compile TS->ES6 and then babel to compile ES6->ES5.. I cannot use TS->ES5 becuase I'm using generator functions which are not compilable with plugin-typescript
Peter Müller
@Munter
Oct 26 2016 16:10
You can't chain loaders. You'll need to write a wrapper. Not difficult, but tedious
If systemjs ever gets as popular as webpack there will be an explosion of loader wrappers in all possible combinations. It will be impossible to find anything
Conclusion: loaders are the wrong place to handle a transpiling pipeline
Jonas Kello
@jonaskello
Oct 26 2016 16:12
@Munter Thanks, at least now I know it is not possible :-) .. So how should transpiling be handled?
Peter Müller
@Munter
Oct 26 2016 16:13
Currently the most feasible way is probably a watcher task that puts build artifacts in the web root of you development directory
Jonas Kello
@jonaskello
Oct 26 2016 16:13
Actually my first attempt was to just run jspm bundle with plugin-typesccript to get resulting ES6... then running babel over the bundled result.. but that broke the header that jspm adds to the bundle
Peter Müller
@Munter
Oct 26 2016 16:14
I prefer more on demand solutions like express middleware or the more experimental approach of a transpiling proxy filesystem
Jonas Kello
@jonaskello
Oct 26 2016 16:14
Not sure what the header and footer of the bundled result are for.... not easy to see as they are minified..... I thought the bundle would just be a bunch of System.register calls but seems a header and footer is required too
Peter Müller
@Munter
Oct 26 2016 16:15
You can disable minification of you want to dive into it
Jonas Kello
@jonaskello
Oct 26 2016 16:16
Do you know what the prefix/header of the bundle is doing?
Jonas Kello
@jonaskello
Oct 26 2016 16:22
Seems related to umd....
Jonas Kello
@jonaskello
Oct 26 2016 16:30
So probably the prefix/suffix is for making it an umd module.... however seems that part cannot be compiled with babel
Seems jspm bundle is more what I want, that did not add the prefix/suffix as build did
JasonKleban
@JasonKleban
Oct 26 2016 22:18
I just reorganized my typescript library to use modules and get compiled to a single output with SystemJS module style. I have it mostly set up right, but when the page loads, the required dependencies are undefined. I see lots of posts on this, but some of it is stale and the rest I don't recognize as my scenario.
The library compiles to a js file and a d.ts definitions for consumption by the outer app.
JasonKleban
@JasonKleban
Oct 26 2016 22:26

The MyLib/out/my-lib.js contains:

    System.register("MyLib", [ ...

The outer app's index.html is like this:

    <script>
        System.defaultJSExtensions = true;
        SystemJS.config({
            packages: {
                '.': {
                    map: {
                        'MyLib': 'MyLib/out/my-lib.js'
                    }
                }
            },
            baseURL: '/'
        });

        SystemJS.import('main');
    </script>

and main.ts (which is loaded as the compiled main.js) has:

    /// <reference path="./MyLib/out/my-lib.d.ts" />

    import * as MyLib from "MyLib";
    // import MyLib from "MyLib"; ???
    // import MyLib = require("MyLib"); ???
but in Chrome at runtime, MyLib is some { prop useDefault; prop default } (which is similiar to but not exactly the same as what {} shows in the debugger) and the module members I expect to see aren't there