These are chat archives for systemjs/systemjs

28th
Jul 2017
Luke Crooks
@crooksey
Jul 28 2017 08:11
@jwilson8767 thanks, thats what I had already ;)
Luke Crooks
@crooksey
Jul 28 2017 08:17
@mlc-mlapis ping
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:21
@crooksey ... hi, did you read my comment?
Luke Crooks
@crooksey
Jul 28 2017 08:21
Yea, I am a bit confused though, do you have 5 minutes to help?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:21
@crooksey sure
Luke Crooks
@crooksey
Jul 28 2017 08:22
I want to keep using commonjs

so I tried:

import myTemplate from './app.component.html'

@Component({
    template: myTemplate.default,
    selector: 'app',

})

But I get "default does not exist on string"

Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:22
... I know. :smile:
Luke Crooks
@crooksey
Jul 28 2017 08:23
Because if I use system, it messes up my imports for other modules, ^^ as mentioned above
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:23
... it is necessary to look at the code of systemjs-plugin-text/text.js
.. and what TS transpiles ... .js.
...
/*
  Text plugin
*/
exports.translate = function(load) {
  if (this.builder && this.transpiler) {
    load.metadata.format = 'esm';
    return 'exp' + 'ort var __useDefault = ' + JSON.stringify(load.source) + '; exp' + 'ort default __useDefault;';
  }

  load.metadata.format = 'amd';
  return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
}
... amd way is used for commonjs
Luke Crooks
@crooksey
Jul 28 2017 08:26
OK
Im still very new to typescript, what does this mean?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:28
... and TS transpile source code to:
import appMainTemplate from './app-main.htm!text';
...
console.log(app_main_htm_text_1.default);
Luke Crooks
@crooksey
Jul 28 2017 08:29
ok
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:29
.. so as you can see JS expects that text HTML code will be contained in default property.
Luke Crooks
@crooksey
Jul 28 2017 08:30
OK
So why I am getting typescript errors with that code, do I need to change another tsconfig or systemJS setting to use amd?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:31
... you need to change code of systemjs-plugin-text/text.js to:
load.metadata.format = 'amd';
load.metadata.esModule = true;
return 'def' + 'ine(function() {\nreturn { default: ' + JSON.stringify(load.source) + ' };\n});';
Luke Crooks
@crooksey
Jul 28 2017 08:32
OK
And then in doing that, I can run:
import myTemplate from './app.component.html'

@Component({
    template: myTemplate,
For example?#
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:32
... yes
Luke Crooks
@crooksey
Jul 28 2017 08:32
OK thats great
My next question is, this means I have to maintain a fork of this plugin in order for my app to compile
Could I modify this plugin, so that it detected if tsconfig was set to commonjs, then add the flag load.metadata.esModule = true; ?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:34
... there are some other factors why they did not do it already in the original code ... so now it is on you ...
Luke Crooks
@crooksey
Jul 28 2017 08:34
ok, thanks
:)
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:35
... load.metadata could help maybe to recognize the situation ...
... it is very short code so maybe you can write your own custom solution.
Luke Crooks
@crooksey
Jul 28 2017 08:38
Yes true, but it just adds an extra layer to maintain
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:38
... yes, it is true also. :smile:
Luke Crooks
@crooksey
Jul 28 2017 08:38
I much prefer systemJS to webpack, but everything with angular seems to push webpack use
It seems always like an uphill struggle
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:39
... I see that case as still keeping the alternative way.
Luke Crooks
@crooksey
Jul 28 2017 08:40
SystemJS seems a lot easier/more compact
webpack seems very heavy/bloated
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:42
... hmm, I think that Closure Compiler and Bazel will be the way .... ABC path ... Angular+Bazel+Closure ...
... because without them they are not probably use AOT for dev process as default mode ...
Luke Crooks
@crooksey
Jul 28 2017 08:48
@mlc-mlapis so will that remove the need for webpack/systemjs?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:48
@crooksey ... I think so ...
... but we are talking about Angular 6
Luke Crooks
@crooksey
Jul 28 2017 08:50
Yea
@mlc-mlapis ok so in the future...
Where I am now I can either use webpack or systemJS
Is there any advantage to staying with one or the other, in terms of future migration?
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:58
... because of the fact that CLI is using Webpack there will be probably a bit easier way with Webpack but as I said before ... using ngc with alternative as SystemJS or Rollup is still an interesting option.
Luke Crooks
@crooksey
Jul 28 2017 08:59
OK thanks, Ill stick with systemJS for now, thanks for the help
Miloš Lapiš
@mlc-mlapis
Jul 28 2017 08:59
:+1: