"Ahead Of Time" Compilation using Webpack

You can compile the app in the browser, at runtime, as the application loads, using the Just-in-Time (JiT) compiler as we did until now. But there is another way called "AHEAD-OF-TIME" COMPILATION which as said in Angular2 official site: "radically improves performance". Here we convert the components and templates to executable JavaScript files before runtime.

Steps:

1. Create your project folder structure.
2. Install and configurate all required modules.
3. Build and run the app

Step 1 - Create your root project folder

The root folder contains our index.html, a few configuration files, and the app folder which holds the main content of the application.

 /root
    /app
        /app.component.ts
        /app.module.ts
        /main.ts
        /other source files
    /index.html
    /package.json
    /tsconfig.json
    /tsconfig.aot.json
    /webpack.config.js
                        

Step 2 - Install and configurate all required modules

Apart from the package.json and tsconfig.json you will need tsconfig.aot.json and webpack.config.js files.
The tsconfig.aot.json is a normal tsconfig.json file, but with "AoT"-oriented settings.
Let's take a look at the config files:

package.json

{
  "name": "angular2_jqwidgets_aot_webpack_example",
  "version": "1.0.0",
  "description": "Angular 2 AOT (Ahead Of Time) compilation with Webpack",
  "scripts": {
    "ngc": "ngc -p ./tsconfig.aot.json",
    "webpack": "webpack --config webpack.config.js --optimize-minimize",
    "start": "npm run ngc && npm run webpack"
  },
  "devDependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ngtools/webpack": "1.1.2",
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.41",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.4",
    "core-js": "^2.4.1",
    "raw-loader": "^0.5.1",
    "rxjs": "5.0.0-rc.1",
    "typescript": "2.0.6",
    "webpack": "^2.1.0-beta.25",
    "zone.js": "0.6.26"
  }
}

• ngc compiles our .ts files to .js. It is a drop-in replacement for tsc.
• webpack gets the transpiled .js files and bundles them to a single .js file.

When we type npm start in our CLI it executes both the commands. We just need to include the bundled file in or HTML and run it.

tsconfig.json

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "typeRoots": [ "./node_modules/@types" ],
    "types": [
      "core-js",
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "aot"
  ]
}

tsconfig.aot.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "./aot",
    "rootDir": "./app",
    "typeRoots": [ "./node_modules/@types" ],
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  },
  "exclude": [
    "node_modules",
    "aot"
  ]
}

What's really new is the ngc section called angularCompilerOptions. Here we say to the compiler to skip generating metadata files with the compiled application. We have also set "rootDir" which means all of our source files must be inside the folder named "app". For more information about АОТ please refer to the official "AHEAD-OF-TIME" COMPILATION cookbook.

webpack.config.js

'use strict';
let path = require('path');
let webpack = require('webpack');
module.exports = {
  entry: {
      'main': './app/main.ts',
  },
  output: {
    path: './aot',
    filename: '[name].min.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'awesome-typescript-loader?tsconfig=tsconfig.json',
          'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        use: 'raw'
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      path.join(process.cwd(), 'app')
    )
  ],
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.ts', '.js']
  },
};

For more information about Webpack please refer to the official guide.

Step 3 - Build and run the app

I. Create index.html

Add the needed references:

<!-- JQuery and jQWidgets Library -->
<script src="jquery.js"></script>
<script src="jqxcore.js"></script>
<script src="jqxdraw.js"></script>
<script src="jqxbargauge.js"></script>
 
<!-- Angular -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/zone.js/dist/long-stack-trace-zone.min.js"></script>

Add the <my-app></my-app> tag to the body of index.html. That's the tag where we initialize the main component.
Then import the bundled file we received after running the npm start command.

<body>
     
    <my-app>Loading...</my-app> 
     
    <script src="aot/main.min.js"></script>
     
</body>

II. Create app.module.ts

III. Create main.ts

IV. Create app.component.ts

Make a reference to jqwidgets.d.ts. It contains all the TypeScript definitions for the widgets.

Import the Angular2 key components - Component, ViewChild, AfterViewInit. Then import the needed jQWidgets components.

@Component decorator:

Now it's time to create the AppComponent class.

1) @ViewChild: It holds the reference to the widget.

2) ngAfterViewInit: All widgets have a method called createWidget that accepts either no arguments or just one - an object containing the desired settings for the widget. If there is no argument then the widget is created through attributes.
For more information about creating jQWidgets through attributes please refer to this guide.

Events Methods & Properties

I. Events

We need to set an additional attribute to the angularWidget tag in order to bind to the event - onDrawEnd

II. Methods & Properties

Every widget have a method setOptions which accepts a object as an argument. This object contains widget settings.

Example Files