These are chat archives for systemjs/systemjs

27th
Jun 2016
saurshaz
@saurshaz
Jun 27 2016 08:56

i have used systemjs to build a riotJS starter project with babel-plugin and shared it here (got rid of the build tool)

https://gitlab.com/saurshaz/riot-one

Glen
@glen-84
Jun 27 2016 10:47
Does anyone have an example of how to load the same local module in both the browser and node using SystemJS?
Miguel Couto
@Mig1st4ck
Jun 27 2016 14:49
hello
can someone help me
i am configuring an angular app
and using a rsconfig to bundle my app with systemjs module
them i define my System.config with this
    System.config({  
   "map":{  
      "app":"js",
      "@angular":"bundles/@angular",
      "angular2-in-memory-web-api":"bundles/angular2-in-memory-web-api",
      "rxjs":"bundles/rxjs"
   },
   "packages":{  
      "app":{  
         "main":"app.js",
         "defaultExtension":"js"
      },
      "rxjs":{  
         "defaultExtension":"js"
      },
      "angular2-in-memory-web-api":{  
         "main":"index.js",
         "defaultExtension":"js"
      },
      "@angular/common":{  
         "main":"common.umd.js",
         "defaultExtension":"js"
      },
      "@angular/compiler":{  
         "main":"compiler.umd.js",
         "defaultExtension":"js"
      },
      "@angular/core":{  
         "main":"core.umd.js",
         "defaultExtension":"js"
      },
      "@angular/forms":{  
         "main":"forms.umd.js",
         "defaultExtension":"js"
      },
      "@angular/http":{  
         "main":"http.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-browser":{  
         "main":"platform-browser.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-browser-dynamic":{  
         "main":"platform-browser-dynamic.umd.js",
         "defaultExtension":"js"
      },
      "@angular/router":{  
         "main":"router.umd.js",
         "defaultExtension":"js"
      },
      "@angular/router-deprecated":{  
         "main":"router-deprecated.umd.js",
         "defaultExtension":"js"
      },
      "@angular/upgrade":{  
         "main":"upgrade.umd.js",
         "defaultExtension":"js"
      }
   }
});
Miguel Couto
@Mig1st4ck
Jun 27 2016 14:54
them on the page i load it with
System.import('app')
the page loads it but it don't run my bootstrap script
am i doing something wrong??
jairov4
@jairov4
Jun 27 2016 14:57
@Mig1st4ck I use a different approach
for the same goal
Look my config

var devEnv = true;
var cfg = {
transpiler: false,
map: {
"app": "dist",
"rxjs": "node_modules/rxjs",
"@angular/common": "node_modules/@angular/common",
"@angular/compiler": "node_modules/@angular/compiler",
"@angular/core": "node_modules/@angular/core",
"@angular/forms": "node_modules/@angular/forms",
"@angular/platform-browser": "node_modules/@angular/platform-browser",
"@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic",
"@angular/router": "node_modules/@angular/router",
},
packages: {
"app": { format: 'register' },
"@angular/common": { format: 'cjs', main: 'index.js' },
"@angular/compiler": { format: 'cjs', main: 'index.js' },
"@angular/core": { format: 'cjs', main: 'index.js' },
"@angular/forms": { format: 'cjs', main: 'index.js' },
"@angular/platform-browser": { format: 'cjs', main: 'index.js' },
"@angular/platform-browser-dynamic": { format: 'cjs', main: 'index.js' },
"@angular/router": { format: 'cjs', main: 'index.js' }
}
};

if(!devEnv) {
cfg.bundles = { "dist/all.min.js": [ "dist/main.js" ] };
}

System.config(cfg);

It is working for me
Miguel Couto
@Mig1st4ck
Jun 27 2016 14:59
how does bundles work?
jairov4
@jairov4
Jun 27 2016 15:00
When the bundle version is used, this cfg.bundles allows to resolve the path 'dist/main' to the right bundled file.
'dist/main' is in my case the bootstrapper file
but due to the first mapping is seen from the source code as 'app/main'
I load the main bootstrap the page using System.import('app/main')
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:03
ok so i need to change the import to app/main
jairov4
@jairov4
Jun 27 2016 15:03
yes, change to your bootstrap module.
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:03
when i do this the browser asks for /js/main.js file
jairov4
@jairov4
Jun 27 2016 15:04
thats correct
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:04
but since that code is bundled in /js/app.js
i am now using this in system config
var config = {
    bundles: {
        'js/app.js': ['js/main.js']
    },
    map: map,
    packages: packages
};
is this correct???
its not working btw
jairov4
@jairov4
Jun 27 2016 15:05
Hey man, by the way, how do I quote the code as you?
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:06
use triple ` before and after
jairov4
@jairov4
Jun 27 2016 15:07
Ensure that your bundled file includes System.registerDynamic('') for the modules you bundled
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:08
i am using tsc to bundle the files
:(
jairov4
@jairov4
Jun 27 2016 15:09
ok it's different
Check your bundled file and look if System.registerDynamic or System.register is used
If just one System.register is used, you will need a totally different approach
I have used this using files bundled with SystemJS builder. https://github.com/systemjs/builder
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:14
i have 2 files bunbles so there is 2 system,register('name', etc
jairov4
@jairov4
Jun 27 2016 15:17
Sorry. In this case you only have one System.registerin each bundled file, that means you only have two modules. And your original method is fine.
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:19
i changed my app to deliver multiple files instead of a bundle
{
  "compilerOptions": {
    //"outFile": "../../../public/js/app.js",
    "outDir": "../../../public/js/",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "inlineSourceMap": false,
    "inlineSources": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
and now it loads my app
but for angular stuff it trys to download single files instead of using the bundle
any ideias???
jairov4
@jairov4
Jun 27 2016 15:30
What single files?
Miguel Couto
@Mig1st4ck
Jun 27 2016 15:41

zone.js:101 GET http://localhost:9095/bundles/rxjs/Subject.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM18929:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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
list?sub=app:486 Error: Error: XHR error (404 Not Found) loading http://localhost:9095/bundles/rxjs/Subject.js(…)(anonymous function) @ list?sub=app:486ZoneDelegate.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:101 GET http://localhost:9095/bundles/rxjs/observable/PromiseObservable.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM18929:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:101 GET http://localhost:9095/bundles/rxjs/operator/toPromise.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM18929:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:101 GET http://localhost:9095/bundles/rxjs/Observable.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM18929:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:101 GET http://localhost:9095/bundles/rxjs/Subject.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask
it tryes to load rxjs individually
saurshaz
@saurshaz
Jun 27 2016 19:58
Is it possible for SystemJS to import from blob URLs for the entry file ?
System.import('<blob url to entry.js>').then(function(app){
  console.debug('loaded systemJS')
}