These are chat archives for systemjs/systemjs

15th
May 2016
JavascriptMick
@JavascriptMick
May 15 2016 06:46

hi guys, getting a wierd error with handling of comments in a typescript file. I have a simple service that is imported and then new()'ed in another class. When I write the service like this...

export class MyService {
    constructor() { }
}

Then everything works ok, but when I include what I thought were innocuous comments in the class file (wip code copied from somewhere else)...

export class MyService {
    constructor() { }
}

/*
export class AnotherService {}
*/

The compilation works ok but I get a wierd error in the browser...

zone.js:101 GET http://localhost:4200/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM17156:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.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
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:4200/traceur
    Error loading http://localhost:4200/app/notes/my.service.js as "./my.service" from http://localhost:4200/app/notes/notes.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur(…)

I am using a standard angular-cli project so the system.js loader is doing the loading.. any clues?

niabot
@niabot
May 15 2016 12:37
@JavascriptMick My guess is that SystemJS does not recognize your file as one of the common module formats, falls back to ES6 and tries to load traceur as the transpiler to be able to execute ES6 code. But since traceur is not found, everything breaks down. I have no idea which role zone.js plays in this.
Ciel
@ciel
May 15 2016 20:25
Hey there, I was wondering if anyone present might know a thing or two about how to deal with global modules? I ... think that's the problem I'm encountering anyway. I've got a library (showdownjs) that I'm trying to load - and it loads fine by script tags - but I cannot get it to load through systemjs.
I've gathered up what information I think is relevant to the issue; Essentially this is how I'm registering it in my configuration. I'm certain the path is accurate, and I get no errors about importing it. But attempts to actually call it after being loaded yield an error that it is not defined
This message was deleted
This message was deleted
This message was deleted
System.config({
    transpiler: "typescript",
    defaultJSExtensions: true,
    map: {
        'showdown'          : 'http://path-to-cdn/js/showdown.js'
    },
    meta: {
        'showdown': {
            exports: 'showdown',
            scriptLoad: true
        }
    }
});

Promise.all([
    System.import('showdown')
    // other imports
]).then(function(modules) {
    // showdown is not defined
});
There we go.
Ciel
@ciel
May 15 2016 20:32
I was told I need to try loading it as a global, but doing so yields an error AMD define called while executing global module
Ciel
@ciel
May 15 2016 20:49
Does SystemJS act differently if you do an include with braces or not? Is there a difference in include { VAR } from 'source'; and include VAR from 'source';?
niabot
@niabot
May 15 2016 21:31
@ciel You might need to add format: 'global' to your meta entry.
As it looks:
// CommonJS/nodeJS Loader
if (typeof module !== 'undefined' && module.exports) {
  module.exports = showdown;

// AMD Loader
} else if (typeof define === 'function' && define.amd) {
  define(function () {
    'use strict';
    return showdown;
  });

// Regular Browser loader
} else {
  root.showdown = showdown;
}
}).call(this);
This is a mixed format. You might want to load it purely as an amd or node module as well.
niabot
@niabot
May 15 2016 21:38

Does SystemJS act differently if you do an include with braces or not? Is there a difference in include { VAR } from 'source'; and include VAR from 'source';?

With jquery i used import * as $ from 'jquery' so you might want to use a similar import.

Which results in the same code as in guybedford's answer, just that the compiler will create the variable for you ;-)