Router integration...

[NathanWalker]

I've been exploring getting the Router working here. Modifying main.ts as follows:

import {bootstrap} from '../dist/main';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {App} from './component';

bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

component changes:

@Component({
  selector: 'home',
  template: '<div>HOME</div>'
})
class HomeComponent {}

@Component({
  selector: 'app',
  template: `<div>Hello from {{name}}</div><router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: HomeComponent, as: 'Home' }
])
export class App {
    name: string;
    constructor(){
        this.name = 'Angular2 Electron!';

        setTimeout(() => {
            this.name = 'Angular2 Electron!!!';
        },1000);
    }
}

Results in this error:

EXCEPTION: No provider for Router! (RouterOutlet -> Router)
EXCEPTION: Error: Uncaught (in promise): No provider for Router! (RouterOutlet -> Router)

It gets closer by modifying electron_app.ts as follows:

export const ELECTRON_APP_APPLICATION: Array<any /*Type | Provider | any[]*/> = [
  ELECTRON_APP_APPLICATION_COMMON,
  COMPILER_PROVIDERS,
  new Provider(MessageBus, { useFactory: createMessageBus, deps: [NgZone] }),
  BrowserPlatformLocation,
  MessageBasedPlatformLocation,
  new Provider(APP_INITIALIZER, { useFactory: initRouterListeners, multi: true, deps:[Injector] })
];

function initRouterListeners(injector: Injector): () => void {
  return () => {
    let zone = injector.get(NgZone);

    zone.run(() => injector.get(MessageBasedPlatformLocation).start());
  };
}

This results in this error:

Error during instantiation of BrowserPlatformLocation! (MessageBasedPlatformLocation -> BrowserPlatformLocation).

In the spirit of exploration and attempting to dig deeper, I mocked BrowserPlatformLocation like so:

class BrowserPlatformLocationMock extends PlatformLocation {
  private _location: any;
  private _history: any;

  constructor() {
    super();
    this._init();
  }
  _init() {
    this._location = {
      pathname: '',
      search: '',
      hash: ''
    }
    this._history = {
      forward: () => {},
      back: () => {},
      pushState: (state: any, title: any, url: any) => {},
      replaceState: (state: any, title: any, url: any) => {}
    }
  }
  get location(): any { return this._location; }
  getBaseHrefFromDOM(): string { return ''; }
  onPopState(fn: UrlChangeListener): void {}
  onHashChange(fn: UrlChangeListener): void {}
  get pathname(): string { return this._location.pathname; }
  get search(): string { return this._location.search; }
  get hash(): string { return this._location.hash; }
  set pathname(newPath: string) { this._location.pathname = newPath; }
  pushState(state: any, title: string, url: string): void {}
  replaceState(state: any, title: string, url: string): void {}
  forward(): void { this._history.forward(); }
  back(): void { this._history.back(); }
}

// then substitute the mock in the providers:
new Provider(BrowserPlatformLocation, { useClass: BrowserPlatformLocationMock })

That results in this:

Error during instantiation of PlatformLocation! (RouterOutlet -> Router -> Location -> LocationStrategy -> PlatformLocation).

Curious if anything jumps out to anyone here that may get the Router working with this?

This experimentation (hacking) is continuing here: https://github.com/NathanWalker/angular2-seed-advanced/tree/4-electron-support

Specifics related to above: https://github.com/NathanWalker/angular2-seed-advanced/blob/4-electron-support/src/frameworks/desktop.framework/electron/platform/electron_app.ts#L92

Hoping in the future, Router support will be possible here and this implementation could be wrapped up and provided as an npm module. In meantime, there is always manual exploration :)

[mmccook]

@NathanWalker Did you ever get this working properly?

[robwormald]

Will look into this in the rewrite. The simplest case is reasonably straightforward, but what happens with multiple windows (!?) (multiple routers?)