A couple of weeks ago I created a sample repository for demonstrating the usage of ng2 in electron apps when writing ES2015.
Today I’ve investigated some time in building a electron showcase app which explains how to create desktop apps using angular2 (currently beta0) when relying on TypeScript.
So the repository is out there on github at https://github.com/ThorstenHans/electron-ts-ng2, as every time I’ve build a small
gulpfile.js which takes care about all the transpiling, copying and other required build steps to generate the electron app for all three platforms (windows, linux and of course MacOS)
SystemJS at runtime. There is nothing special in the
gulpfile when comparing it to other samples I’ve published earlier when not using TypeScript, so I’ll skip that for now.
More important are some pitfalls when combining
electron. There are plenty demo applications available out there. But a quick google didn’t bring up a single sample using angular’s new component router.
As mentioned within angular’s developer guide on angular.io, the router requires a
<base href="/foo"/> or
<base href="/"> in order to work as expected. If you don’t add the
base node within
<head> ng2 will throw an error like shown in figure 1.
base node works fine when running inside of the browser but it prevents the app from finding the routes when executing the same source in
electron. But there is hope (as always :D). You can alternatively configure the
base within your app bootstrap routine.
This is required when you’re loading scripts from within electrons renderer process.
Snippet 1 shows the
boot.ts file which is responsible for bootstrapping our ng2 app
The important and new part here is the usage of
provide to tell angular where the new
base is. But there is more required. ng2 is offering a
Location service which is responsible for interacting with browser’s URL. Check out
app.component.ts (Snippet 2), the
RouteConfig can take an optional
useAsDefault property of type boolean. Setting this to true works fine when not using
provide but the combination of
useAsDefault: true didn’t work for me here. That’s why I used the
Location service (provided by angular’s DI container) to redirect the user immediately to the Splash Component.
Within the current public available version of this sample. I’ve to load the splash template by using the plain
template property, when using
templateUrl as I did for the
app.component.ts angular2 isn’t able to find the template. For now, it seems like the template will be requested after the AppBaseHref is set and in combination with electron’s path handling ng2 isn’t able to find the template at a given URL.
Action required ;-)
If you’ve any idea how to fix that feel free to send me a pull request on github or chat with me about it.
My coworker @ManuelRauber (see his posts on ng2 too) already provided a fix as pull request for the described issue. He added the
HashLocationStrategy to the sample, which will make angular find the template again \0/