These are chat archives for systemjs/systemjs

18th
May 2016
natetyler
@natetyler
May 18 2016 01:10
@guybedford I went through many iterations trying to get this all to work, I must have copy/pasted some shim at some point to get jquery screwed up. I used to have this in my config.js:
    "github:Semantic-Org/Semantic-UI@2.1.8": {
      "jquery": "github:components/jquery@2.2.1"
re: electron being annoying - absolutely
Nathan Kleinschmidt
@llnathanll
May 18 2016 02:09
what could be the issue if my
System.import('client.js').then((m) => { console.log(m) })
returns an empty object?
Christian S.
@Braincompiler
May 18 2016 04:25
@llnathanll The reason for this coumm
Ooops, wrong button, sry
The reason could be that the module client.js is nothing exporting
How do you bundle the client.js? With jspm or webpack?
niabot
@niabot
May 18 2016 07:49

How does SystemJS handle cyclic dependencies between classes in different modules? Lets say i have two classes:

export class Component {
  private parent: Container;
  ...
}
export class Container extends Component {
  constructor() {
    super();
  }
  ...
}

As long this two classes are defined within the same module i have no issue with this cyclic dependency. But i ran into issues if i defined both classes in different modules:

// component.ts ('lib/component')
export class Component {
  private parent: Container;
  ...
}

// container.ts ('lib/container')
export class Container extends Component {
  constructor() {
    super();
  }
  ...
}

Does SystemJS provide some kind of mechanism to deal with this issue? I know that this can be done if the order of loading the modules is manually adjusted. But doing that for many classes is a pain and error prone. I'm looking for an automatic way to deal with this problem.

niabot
@niabot
May 18 2016 08:21
It simply annoys me that i have to put some classes inside the same module (ts file), even so they would be better placed in a different module/package of the same library.
Christian S.
@Braincompiler
May 18 2016 10:24
@niabot The solution should be to remove the cyclic dependency, cyclic dependencies is an anti-pattern
Why do you need the Container as parent of an Component? Wouldn't a parent from type Component be sufficient?
For me its seems to be a bad software design
Yannick
@LPalmito
May 18 2016 11:22

Hey!
Probably a dumb question but in my config.ts file:

System.config({
    baseURL: BASE_URL,
    defaultJSExtensions: true,
    paths: {
        "npm:*": "jspm_packages/npm/*",
        "github:*": "jspm_packages/github/*",
        "node_modules*": "node_modules/*",

        "lodash": "node_modules/lodash/lodash.js"
    },
    map: {

        "app": "app",
        "angular2": "node_modules/angular2",

        "@ngrx/store": "node_modules/@ngrx/store/dist",
        "rx": "node_modules/rx",
        "rxjs": "node_modules/rxjs",
        "ng2-material": "node_modules/ng2-material",
        "ngrx-store-localstorage": "node_modules/ngrx-store-localstorage"
    },
    packages: {

        app: { main: "bootDesktop.js", defaultExtension: 'js' },
        'angular2/common': { main: 'index.js', defaultExtension: 'js' },
        'angular2/compiler': { main: 'index.js', defaultExtension: 'js' },
        'angular2/core': { main: 'index.js', defaultExtension: 'js' },
        'angular2/http': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
        'angular2/testing': { main: 'index.js', defaultExtension: 'js' },
        'angular2/upgrade': { main: 'index.js', defaultExtension: 'js' },

        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        "ng2-material": { defaultExtension: 'js' },
        "@ngrx/store": { main: 'index.js', format: 'cjs' },
        "rxjs": { defaultExtension: 'js' },
        "rx": { defaultExtension: 'js' },
        "ngrx-store-localstorage": { defaultExtension: 'js'}
    },
    meta: {
        './module/path.js': {
            format: 'esm'
        }
    }
});

System.import('./app/boot')
    .then(null, console.error.bind(console));

where System is supposed to come from? Webstorm is proposing me multiple choices to import it and I don’t know which one is supposed to be used

niabot
@niabot
May 18 2016 11:56
@Braincompiler This is the typical pattern across nearly every native UI framework, since a Component can only be contained within a Container, while a plain Component has no children. The main reason is that such a component does not need to carry around any storage for children. But that is more a question of taste than anything else. Additionally it is just an example for my issue.
niabot
@niabot
May 18 2016 12:04
If we stay with UI components: I have a TitledPane which is a container [lib/container] (it allows setting the content), while it contains a Label at the top which is an control [lib/control] but it extends Container [lib/container] to contain a graphic and text. And bang, i have cyclic dependency. In mostly every language this wouldn't be an issue at all, but with modules in JS it is. :worried:
niabot
@niabot
May 18 2016 12:11
@LPalmito System is a global variable provided by the inclusion of 'system.js' in the script tags of your hml document or via require in node.
<script src="system.js"></script> <!-- provides the SystemJS object as a global variable named System -->
<script src="config.js"></script> <!-- your compiled configuration file and main entry into the application -->
Nathan Kleinschmidt
@llnathanll
May 18 2016 12:16

@Braincompiler - I'm using tsc with

'compilerOptions': { 
  'module': 'system', 
  'outFile': 'client.js', 
  'target': 'es5' 
}

My hope was that all my modules end up in one file and I can import from there. If I look at the generated file, there are individual System.register calls that each return an object with 'setters' and 'execute'. What do you think I'm missing?

niabot
@niabot
May 18 2016 12:17
@Braincompiler That is exactly the same as i also get from tsc and it is fine that way.
niabot
@niabot
May 18 2016 12:28
@Braincompiler I also hoped that tsc would compile everything into one single module, which would be a solution to my cyclic dependency issue (there is no issue as long the classes are defined within the same module). Sadly it doesn't do that. If you find a way to do that, please let me know. I would be very interested in that.
Christian S.
@Braincompiler
May 18 2016 12:36

@niabot Sry, even if other ui frameworks make it, its still not a good design ^^ cyclic dependency is an anti-pattern: https://en.wikipedia.org/wiki/Circular_dependency#Overview You have to avoid it. So

class Component {
    parent:Component;
}

class Container extends Component {
    children:Component[];
}

So, Container is a Component which makes it possible to have a parent which is in turn a Container

niabot
@niabot
May 18 2016 12:38
@Braincompiler That is one way to do it, but you loose the type information on the parent, which you have to manually cast, which is also a bad design.
Yannick
@LPalmito
May 18 2016 12:45
Thanks @niabot! But I don’t have any system.js file, am I missing something here?
Christian S.
@Braincompiler
May 18 2016 12:48
If you have too specific implementations in Container that may happen, what do you need to do which makes it so much important the parent has to be a Container?
niabot
@niabot
May 18 2016 12:52
@Braincompiler I don't have much to do with it. This was meant as a very basic example. But just look at DOMNode, which has the property named parentElement, which returns a DOMElement which inherits from DOMNode ;-)
niabot
@niabot
May 18 2016 12:57
Or write a class named TitledPane which is basically container, so it should belong into the module 'container'. But it contains a title/label and button at the top, which are controls, that should be in the module 'control'. But the class Button extends Container. So TitledPane is in 'container' and has to import a Button from 'control' and the Button extends Container, so it has to import 'control'. And now we have cycle...
Christian S.
@Braincompiler
May 18 2016 12:58
Again, even if other do it, its still not a good design ^^ But I want to know what do you want to do, so maybe I can help to resolve the cyclic dependency which you should always avoid. If you have a generic API for Component you can implement it in Container the way you need it, for instance. You have a problem with cyclic dependency so why not resolve it instead of to find a "hacky" workaround to make it possible? :)
niabot
@niabot
May 18 2016 12:58
If i use a language like Java or C++ this isn't an issue at all. The compiler does it's work and you are done. In Javascript, with the current module formats, you simply can't do that.
Yannick
@LPalmito
May 18 2016 12:58
Thank you @niabot, but I still can’t see where this system.js is supposed to come from, or what should I put into it
Christian S.
@Braincompiler
May 18 2016 12:59
Ok, The first question is: Why is a Button a Container? Its a Control, of course, but never a Container
niabot
@niabot
May 18 2016 13:01
@Braincompiler The Button extends the Container, because it contains a Label, which itself is a Container that contains a graphic and a text.
@LPalmito You have to download system.js or system.min.js from https://github.com/systemjs/systemjs/tree/master/dist and you need to include it into you webpage as the first script statement. Any later script can now use the System object.
@Braincompiler In C++ you have forward declarations, which solve the problem elegantly. In JavaScript i have no such thing. In Java it isn't even required to have them. It just works out of the box.
Christian S.
@Braincompiler
May 18 2016 13:10
@niabot Even if the language gives me the tools to workaround a cyclic dependency its still not a good design, its still an anti-pattern, sry for being so pedantic :) But there are solutions to avoid cyclic dependencies like DIP: https://en.wikipedia.org/wiki/Dependency_inversion_principle
niabot
@niabot
May 18 2016 13:13
I can do that. But i don't like the idea to have dozens of interfaces for the simple purpose of avoiding cyclic dependencies, nearly duplicating amount of code to write. ;-)
niabot
@niabot
May 18 2016 13:19
// component.ts
export interface IContainer {
  children: Component[];
}
export class Component {
  parent: IContainer;
}

// container.ts
import {IContainer, Component} from './component';
export class Container implements IContainer {
  children: Component[] = [];
}
Ugly as **** if you ask me ;-)
Christian S.
@Braincompiler
May 18 2016 13:24
Yeah, way better! :smile:
I would move the IContainer interface definition to an extra file and the Component needs an interface too: IComponent for example
Yannick
@LPalmito
May 18 2016 13:28

Haaaaaaaaaaaaaaaaa! It looks like a dumb and simple thing to do and your explanations are really clear @niabot , but I still have a Cannot find name ‘System’!

I’ve copied and pasted this https://github.com/systemjs/systemjs/blob/master/dist/system.src.js into a system.js file in the root of my project, then I’ve added

        <script src="system.js"></script>
        <script src="config.js"></script>

on top of all my scripts in my index.html, but still Cannot find name ‘System’ if I go into my config.js file… Any idea how it is possible?

niabot
@niabot
May 18 2016 13:29
Yes! But as you can see from this example: I like it simple. Let the compilers/interpreters to their job. Don't let them bother me :hammer:
@LPalmito does system.js get downloaded by the browser?
@LPalmito Ooops. I just see that you posted a config.ts
Yannick
@LPalmito
May 18 2016 13:33
OK, what does it change exactly @niabot?
niabot
@niabot
May 18 2016 13:34
@LPalmito I guess the issue is with typescript not being able to compile that file, because it misses a definition file for SystemJS. You could just rename your config.ts to config.js or you need to add a .d.ts for SystemJS.
But in your case i would just rename the ts file to a js file for config
@LPalmito Do you get the error inside the browser or inside your IDE?
Yannick
@LPalmito
May 18 2016 13:39
Inside my IDE
niabot
@niabot
May 18 2016 13:39
Which IDE do you use?
Yannick
@LPalmito
May 18 2016 13:39
Webstorm

I’ve just added

/// <reference path="systemjs.d.ts" />

import System = require('systemjs’);

to my config.ts

niabot
@niabot
May 18 2016 13:40
no
Yannick
@LPalmito
May 18 2016 13:40
?
niabot
@niabot
May 18 2016 13:41
OK, on second thought this might actually work.
But it would require node to run it
For simplicity i would suggest you just create a config.js and copy the entire content (without import System...) from config.ts to it.
Yannick
@LPalmito
May 18 2016 13:46
OK, that’s what I’ve done without really understand what I’ve done, I’m putting my life into your hands here! :D
niabot
@niabot
May 18 2016 13:48
If you now open the index.html in your browser it should load system.js and after that it should load config.js which then uses SystemJS to load your module.
Yannick
@LPalmito
May 18 2016 13:50

OK, Webstorm is not complaining about this issue anymore, so thanks! But now my browser is saying

config.js:6 Uncaught ReferenceError: exports is not defined

and the page is no loading

niabot
@niabot
May 18 2016 13:51
How does your current config.js look like? (the content)
Yannick
@LPalmito
May 18 2016 13:51
If I do a tsc within the terminal it’s saying Cannot find module 'angular2/core’. and so on, do you think it could be related?
This is my current config.js:
// import {enableProdMode} from "angular2/core";
// enableProdMode();
//
// export const BASE_URL = '/ui/dsi-app';

exports.BASE_URL = '';

//Look at the paths: is the '*' doing all the work I was doing by hand until now? :o

System.config({
    baseURL: BASE_URL,
    defaultJSExtensions: true,
    paths: {

        "npm:*": "jspm_packages/npm/*",
        "github:*": "jspm_packages/github/*",
        "node_modules*": "node_modules/*",

        "lodash": "node_modules/lodash/lodash.js"
    },
    map: {

        "app": "app",
        "angular2": "node_modules/angular2",

        "@ngrx/store": "node_modules/@ngrx/store/dist",
        "rx": "node_modules/rx",
        "rxjs": "node_modules/rxjs",
        "ng2-material": "node_modules/ng2-material",
        "ngrx-store-localstorage": "node_modules/ngrx-store-localstorage"
    },
    packages: {

        app: { main: "bootDesktop.js", defaultExtension: 'js' },
        'angular2/common': { main: 'index.js', defaultExtension: 'js' },
        'angular2/compiler': { main: 'index.js', defaultExtension: 'js' },
        'angular2/core': { main: 'index.js', defaultExtension: 'js' },
        'angular2/http': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
        'angular2/testing': { main: 'index.js', defaultExtension: 'js' },
        'angular2/upgrade': { main: 'index.js', defaultExtension: 'js' },

        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        "ng2-material": { defaultExtension: 'js' },
        "@ngrx/store": { main: 'index.js', format: 'cjs' },
        "rxjs": { defaultExtension: 'js' },
        "rx": { defaultExtension: 'js' },
        "ngrx-store-localstorage": { defaultExtension: 'js'}
    },
    meta: {
        './module/path.js': {
            format: 'esm'
        }
    }
});

System.import('./app/boot')
    .then(null, console.error.bind(console));
(and you even have the comment I’ve made to myself into it haha!)
miha-
@miha-
May 18 2016 13:53
@LPalmito did you have typings installed ?
which version of angular are u using
?
niabot
@niabot
May 18 2016 13:53
exports.BASE_URL = ''; Well that line is useless. Remove it
Yannick
@LPalmito
May 18 2016 13:54
Why? I actually use BASE_URL for the paths of my templates within my app, when it will be time I’ll just have to put the URL to the server here
Angular 2 beta 15 @miha-
And yes I have installed typings
niabot
@niabot
May 18 2016 13:56
@LPalmito If you want to do that, it wouldn't be the right place to put it. But you can't assign something to nothing. "exports" simply does not exist and you want to assign a property to it. Wont work never ;-)
Yannick
@LPalmito
May 18 2016 14:09
OK OK, you were right, it was causing problems, so I’ve removed all these evil BASE_URL, thanks!
The thing is now I’ve got http://localhost:3000/node_modules//angular2/router/index.js 404 (Not Found) in my browser. Where this double slash could come from? This is my config.js:
//Look at the paths: is the '*' doing all the work I was doing by hand until now? :o

System.config({
    defaultJSExtensions: true,
    paths: {

        "npm:*": "jspm_packages/npm/*",
        "github:*": "jspm_packages/github/*",
        "node_modules*": "node_modules/*",

        "lodash": "node_modules/lodash/lodash.js"
    },
    map: {

        "app": "app",
        "angular2": "node_modules/angular2",

        "@ngrx/store": "node_modules/@ngrx/store/dist",
        "rx": "node_modules/rx",
        "rxjs": "node_modules/rxjs",
        "ng2-material": "node_modules/ng2-material",
        "ngrx-store-localstorage": "node_modules/ngrx-store-localstorage"
    },
    packages: {

        app: { main: "bootDesktop.js", defaultExtension: 'js' },
        'angular2/common': { main: 'index.js', defaultExtension: 'js' },
        'angular2/compiler': { main: 'index.js', defaultExtension: 'js' },
        'angular2/core': { main: 'index.js', defaultExtension: 'js' },
        'angular2/http': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser': { main: 'index.js', defaultExtension: 'js' },
        'angular2/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router': { main: 'index.js', defaultExtension: 'js' },
        'angular2/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
        'angular2/testing': { main: 'index.js', defaultExtension: 'js' },
        'angular2/upgrade': { main: 'index.js', defaultExtension: 'js' },

        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        "ng2-material": { defaultExtension: 'js' },
        "@ngrx/store": { main: 'index.js', format: 'cjs' },
        "rxjs": { defaultExtension: 'js' },
        "rx": { defaultExtension: 'js' },
        "ngrx-store-localstorage": { defaultExtension: 'js'}
    },
    meta: {
        './module/path.js': {
            format: 'esm'
        }
    }
});

System.import('./app/boot')
    .then(null, console.error.bind(console));
OK, here I’m just stupid, sorry ^^
miha-
@miha-
May 18 2016 18:43
@miha-
hi
file:///Users/mzoubek/Documents/Miha/www/GroupSweat/public/ts/app.js MultipleErrors: file:///Users/mzoubek/Documents/Miha/www/GroupSweat/public/ts/app.js:4:1: Unexpected token @ file:///Users/mzoubek/Documents/Miha/www/GroupSweat/public/ts/app.js:4:2: Semi-colon expected
what should I be checking regarding this error?
i am trying to use systemjs-builder due to loading time
Andrew Stoker
@AStoker
May 18 2016 20:48
@miha- are you transpiling your code with something like Babel?
It looks like maybe you're using decorators?
This message was deleted
If you're using Babel, make sure you have the right plugins installed for ES7 code