We have configured the webpack in previous section, but, we have not yet started working with the Angular part. Install the Angular dependencies to get started with Angular. Angular is scattered around multiple libraries so you need to install the following libraries to work with Angular:

npm install --save  @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router core-js reflect-metadata rxjs systemjs zone.js

Use the following command if you are using yarn:

yarn add  @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router core-js reflect-metadata rxjs systemjs zone.js

webpack compiles the TypeScript files by looking into a TypeScript configuration file called tsconfig.json. The tsconfig.json file in the root of the project tells the TypeScript compiler that it's a TypeScript project. It gives the configuration to the compiler, like root files and other compiler options required to compile the project.

Create the tsconfig.json file with the following content in the project root to feed webpack:

{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true,
    "supressImplicitAnyIndexErrors": true,
    "lib" : [
      "es2016",
      "dom"
    ],
    "exclude": [
      "node_modules"
    ]
  } 
}

Read more about the tsconfig option on TypeScript website (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

When working with external JavaScript libraries with TypeScript, you will need to use a declaration/definition file(.d.ts) to describe the shape of that library. The TypeScript compiler looks for these declaration files to get metadata about a JavaScript library before compiling the source code.  All the libraries installed on top is having the Typescript definition files inside the library itself. So we don't have to install them separately and the Typescript compiler can locate them from node_modules folder.

But some of the modules do not contain it natively inside the library. We need to install them separately. Use the following command to install missing type definition files into the project.

npm install --save-dev @types/core-js @types/electron @types/node

Or the following command if you are using yarn:
yarn add --dev @types/core-js @types/electron @types/node

We are done with setting up the application. Let's add some code to it and start our Electron client.

webpack starts the bundling process from entry points configured in the webpack configuration object. So, let's create that entry points first. Create the vendor.ts file inside the src folder to import the vendor modules that we need:

// Angular 2 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 

// RxJS 
import 'rxjs';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can also import js, ts, css, sass, etc.

You can import all the third-party libraries here, so that webpack will bundle them against the vendor entry point.

Create our last entry point for webpack where the real application starts to execute. Paste the following content into src/app.ts:

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

webpack treats this as the entry point for our Angular application, which will be rendered using Electron's renderer process. Now declare your Angular module in the src/app.module.ts file. You can find more about Angular modules and its responsibilities at: https://angular.io/docs/ts/latest/guide/ngmodule.html:

import { NgModule } from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
  imports: [ 
    BrowserModule 
  ], 
  declarations: [ 
    AppComponent 
  ], 
  bootstrap: [ 
    AppComponent 
  ] 
}) 
export class AppModule { }

Our application component src/app.component.ts should look like following:

import { Component } from '@angular/core'; 
import * as os from 'os';
import './style.css'

@Component({ 
  selector: 'electron-app', 
  template: `
    <div id="shellInfo">
      <h1> Angular Bootstrapped </h1>
      <div id="processInfo">
        <table>
          <tr>
            <td>Node Version</td>
            <td>{{nodeVersion}}</td>
          </tr>
          <tr>
            <td>Platform</td>
            <td>{{platform}}</td>
          </tr>
          <tr>
            <td>Home Directory</td>
            <td>{{homedir}}</td>
          </tr>
        </table>
      </div>
    </div>
  `
}) 
export class AppComponent {  
  public platform = os.platform(); 
  public homedir = os.homedir();
  public nodeVersion = process.versions.node; 
}

AppComponent renders the Angular application into the renderer. This code just displays the version of node, chrome, and Electron using Angular. Rewrite your HTML file inside src/app/index.html so that webpack can inject the compiled bundles before loading into Electron:

<!DOCTYPE html> 
<html> 
  <head> 
    <base href="/"> 
    <title>Hello Electron - Angular</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
  </head> 
  <body> 
    <electron-app>Loading...</electron-app> 
  </body> 
</html>

Our app is ready to run now. We need to tell webpack to compile it before running the application. Compile the source code using webpack with the following command:

webpack --watch

Once this runs successfully, you can find the compiled output in the build folder. To run the application, use the electron command like we did in the previous chapter:

electron .