Integrate TypeScript and Angular 2

[blissi]

Hallo, is there some boilerplate project or a tutorial how one could integrate TypeScript and Angular 2 with electron-webpack? I'm new to Webpack and Electron and can't figure out what I have to do to support this.

Thanks, Steven

[develar]

Some info https://github.com/electron-userland/electron-webpack/issues/19#issuecomment-328019659

[darrenmothersele]

I got as far as getting an Angular 4 app running within electron-webpack, but I can't get the angular2-template-loader working.

I used the Quick Start from this project's README then added the required angular libs with Yarn...

  "dependencies": {
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/router": "^4.4.6",
    "bulma": "^0.6.0",
    "core-js": "^2.5.1",
    "rxjs": "^5.5.0",
    "source-map-support": "^0.5.0",
    "zone.js": "^0.8.18"
  },

I added Typescript support as per the docs: https://webpack.electron.build/add-ons

In app/renderer/index.js I put the usual Angular polyfills, vendor and main:

import "core-js/es6";
import "core-js/es7/reflect";
require("zone.js/dist/zone");
import "@angular/platform-browser";
import "@angular/platform-browser-dynamic";
import "@angular/core";
import "@angular/common";
import "@angular/http";
import "@angular/router";
import "rxjs";

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { enableProdMode } from "@angular/core";
import { AppModule } from "./app/app.module.ts";

if(process.env.ENV === "production") {
    enableProdMode();
}

const base = document.createElement('base');
base.href = '/';
document.head.appendChild(base);

platformBrowserDynamic().bootstrapModule(AppModule);

There's an extra few lines before the bootstrap to add the <base href='/' /> tag required by the angular router.

You have to change the selector in app.component.ts as the app tag provided by electron-webpack is hard coded with an ID...

@Component({
    selector: '#app',
    template: '<h1 class="title">App works</h1> <router-outlet></router-outlet>',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

This allowed my to get a basic Angular 4 app up and running in electron-webpack - as long as I use inline templates. When I tried to add templates using templateUrl I get a 404 error. My first attempts at including the angular2-template-loader resulted in lots of Typescript errors, which I've been unable to fix, yet...

[darrenmothersele]

I think I've got it working by adding the following webpack.renderer.additions.js file:

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader",
                    },
                    {
                        loader: "angular2-template-loader"
                    }
                ]
            }
        ]
    }
};

[darrenmothersele]

More details: https://medium.com/@darren.kendraio/using-angular-with-electron-webpack-b9763903823c

[develar]

@darrenmothersele thanks! Thanks for article, I will try to simplify and explicitly support angular next week.

[edallison]

@darrenmothersele thank you! That guide was very helpful. Have you had any luck with packaging? I was able to get this running in a development environment however when I package with electron builder I get tons of template parse errors such as "Can't bind to 'routerLink' since it isn't a known property of 'li'". My scripts:

"scripts": { "dev": "electron-webpack dev", "compile": "electron-webpack", "dist": "yarn compile && electron-builder", "dist:dir": "yarn dist -- --dir -c.compression=store -c.mac.identity=null" }

Edit: Sorry, I just realized that the example repo you listed runs fine when compiled. My issue is specific to my app and I'll need to keep digging.

Edit2: I've further narrowed down the issue I'm having. If I simply change the template file to <h1 *ngIf="true" class="title">App Works!</h1> the app will still work when running in dev but not when compiled. When I compile the app I get:

Error: Template parse errors: Can't bind to 'ngif' since it isn't a known property of 'h1'. ("<h1 [ERROR ->]*ngif=true class=title>App Works! "): ng:///e/e.html@0:4 Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

This is strange because the 'ngIf' in the template is capitalized correctly but 'ngif' in the error is not.

[darrenmothersele]

That is strange.

I've been looking into an alternative approach using the webpack config generated by Angular CLI. It would be good to be able to take advantage of some of the improvements offered by CLI 1.5, and be able to continue to make use of CLI functionality for the project.

Ideally, I would be able to take the Angular CLI project, and add electron-builder without having to eject the project from the Angular CLI. I also want to use Typescript and compilation for the main thread as well as the renderer.

I'll post a follow up to that Medium article once we've worked out how we're going to approach this.

[ocombe]

@darrenmothersele any luck with that setup?

[darrenmothersele]

@ocombe I'm still working on this. To make things even more interesting we're now also using Ionic, with Angular CLI and Electron!

[abruneau]

Any update? Maybe a repo we could look at. Thanks

[ghost]

@abruneau I just got it running thanks to some info provided here: https://github.com/webpack-contrib/html-loader/issues/67

After modifying my webpack.renderer.additions.js accordingly it seems to run. I still have to test in conjunction with electron-compile, but at least the templates get bundled correctly.

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader",
                    },
                    {
                        loader: "angular2-template-loader"
                    }
                ]
            },
            {
                test: /\.(html)$/,
                use: {
                  loader: "html-loader",
                  options: {
                    // angular 2 templates break if these are omitted
                    removeAttributeQuotes: false,
                    keepClosingSlash: true,
                    caseSensitive: true,
                    conservativeCollapse: true,
                  }
                }
            }
        ]
    }
};

Update: Its fully working for me! :)

[abruneau]

Thanks @PLehmColCom
could you make a repo to show your base template?