Does not reload components via (angular2) async routes

[mgamsjager]

When using async routes in Angular2 router the change is detected but the component doesn't gets reloaded.

After reloading a parent component the change is visible.

import {RouteConfig} from 'angular2/router';
@RouteConfig([ {path: '/home', loader: () =>System.import (pathtocomponent).then(comp => comp.compname), name: 'MyLoadedCmp'} ])
class MyApp {}

Loading this component without async routes gives expected results

[peteruithoven]

Are there side effects involved with angular2?
I think I'm having sort of the same issue with the React-router, it warns me that it can't be replaced.
We should check if we can't simply rebuild the whole html from scratch, removing all the side effects. I have 0 experience with angular2, not sure if that's possible.

[born2net]

anyone has a working example of ng2 latest build with jspm and hot reloading?

[el-davo]

I have the same issue. It works for the entry level component but when you go to a seperate route nothing gets reloaded

[alexisvincent]

Can someone submit a PR with a failing test case to systemjs-hmr

[mavericken]

• For hot reload to work, SystemJS needs to know that the imported module is a dependency of the module who imported it.
• System.import has no way of telling SystemJS which module called it, so the dependency is not known.

I don't think there is any way to solve this automagically. Instead, we can tell SystemJS ourselves about what we did. Something like this ought to work (adding to @mgamsjager's example):

import {RouteConfig} from 'angular2/router';

function hotImport(moduleToImport, moduleThatWantsToImportIt) {
	return SystemJS.import(moduleToImport).then(function(result){
		var deps = System.defined[System.normalizeSync(moduleThatWantsToImportIt)].normalizedDeps;
		var newDep = System.normalizeSync(moduleToImport)
		if(deps.indexOf(newDep) < 0) deps.push(newDep)
		return result;
	});
}

@RouteConfig([ {path: '/home', loader: () =>hotImport(pathtocomponent,"module/name/of/current/file").then(comp => comp.compname), name: 'MyLoadedCmp'} ])
class MyApp {}

If this works well, we could maybe provide it as an export to systemjs-hmr @alexisvincent.

[alexisvincent]

Tracking here