Hot-reloading with plugin-text via meta config does not work in JSPM 0.17 beta

[svi3c]

I would like to get hot reloading work with https://github.com/systemjs/plugin-text for my Angular 2 component templates.
To achieve this I would prefer using the config meta aproach.
In my project https://github.com/flaviait/ng2-jspm-template/tree/ng2-jspm-template-9 I've tried the following configuration:

packages: {
  'src': {
    'main': 'main',
    'defaultExtension': 'ts',
    'meta': {
      '*.ts': {
        'loader': 'plugin-typescript'
      },
      '*.scss': {
        'loader': 'scss'
      },
      '*.html': {
        'loader': 'text'
      }
    }
  }
}

This works for utilizing plugin-text, but when I do a change, no module reload is triggered.
The https://github.com/KevCJones/plugin-scss works very well with module reloads.
Any ideas?

[capaj]

@svi3c there are currently two opened PRs related to html template reloading: #85
#73

Do you think any of them could help to make this work?

[svi3c]

@capaj At first glance I cannot tell you for sure, but I can have a deeper look at these PRs tonight or tomorrow in the morning.

[svi3c]

I applied both PRs, but none of them fixed the problem.
I found out that there are two issues with the module reloading of the html files:

1. the module is not found when using the meta information. A fix would be to add this snippet at Line 158:

if(!module) {
  moduleImportName = System.normalizeSync(moduleName)
  module = System.loads[moduleImportName]
}

2. When the module is found with the fix in 1), no importers are present on the module. I'm not sure why.

[capaj]

@svi3c should be fixed in 0.5.9, if not, let me know.

[svi3c]

Hi @capaj, I updated the packages and reloaded the entry module directly after load in flaviait/ng2-jspm-template@a38f5d3.
Unfortunately it does not work for me.

[capaj]

@svi3c thanks, will clone your repo and try it myself over the weekend.

[j-walker23]

@svi3c it looks like this is fixed in the latest version i just pulled.
@capaj thanks! you are the man. Frontend dev just keeps getting cooler every day.

[DorianGrey]

Even with the latest version, reloading template files does not really work in our case - I've just tested it with this branch: https://github.com/flaviait/ng2-jspm-template/tree/ts2-templates
Changes appear to be recognized, but are not applied.

[thalen]

I have a solution for this, what I do is to set up the hot reloader first after the source has been imported.

1. Load the hot reloader service
2. After the hot reloader has been loaded, but not started, import the application source
3. Now start up the hot reloader

    System.trace = true;
    readyForMainLoad = System.import('systemjs-hot-reloader').then(function(HotReloader){
        hotReloaderService = HotReloader;
    });
    Promise.resolve(readyForMainLoad).then(function() {
        System.import('./app/styles/main.scss!');
        System.import("app").then(function() {
            console.log("running");
            hr = new hotReloaderService.default('http://localhost:9089');
        });
    });

After this, the component gets updated after a change in the template.
I'm using JSPM 0.17.0-beta.22 and systemjs-hot-reloader 0.6.0

[born2net]

but in my case, I am using angular2, and there are over 100+ separate html templates / css style files (per each component).

Importing all of them that way is not feasible, unless you have another idea?

regards

Sean

[thalen]

I'm also using angular2 but just got started, and I only have a small number of components so far. So I have no solution for any scaling issues with jspm and angular2.

[born2net]

ya I understand...
by the way, checkout:
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/ng2Boilerplate

you will see that I load lots of templates and css files, so ya... still an issue.

Regards,

Sean

[alexisvincent]

@born2net Any chance you could submit a failing test case to systemjs-hmr

[alexisvincent]

Tracking in #131