Angular UI Components Documentation

Using Angular WebPack and jQWidgets

You can also download the final result.

Steps:

  1. Create your project folder structure
  2. Configurate and install all required packages
  3. Build the app

Step 1 - Create your root project folder

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


 /root
    /app
        /index.html
        /src
            /app.component.ts
            /app.module.ts
            /main.ts
    /package.json
    /tsconfig.json
    /webpack.config.js

Note: Structure may vary based on your application needs.

Step 2 - Install and configurate all required packages

Let's take a look at the config files:

package.json

{
    "name": "angular_jqwidgets_aot_webpack",
    "description": "Angular jQWidgets AOT Compilation With Webpack",
    "version": "6.0.0",
    "scripts": {
        "ngc": "ngc -p ./tsconfig.json",
        "webpack": "webpack --config webpack.config.js --optimize-minimize",
        "start": "npm run ngc && npm run webpack"
    },
    "dependencies": {
        "@angular/animations": "6.0.0",
        "@angular/common": "6.0.0",
        "@angular/compiler": "6.0.0",
        "@angular/compiler-cli": "6.0.0",
        "@angular/core": "6.0.0",
        "@angular/platform-browser": "6.0.0",
        "@angular/platform-browser-dynamic": "6.0.0",
        "@angular/platform-server": "6.0.0",
        "angular2-template-loader": "0.6.2",
        "awesome-typescript-loader": "3.2.3",
        "core-js": "2.5.1",
        "css-loader": "0.28.11",
        "file-loader": "1.1.11",
        "jqwidgets-scripts": "5.6.0",
        "raw-loader": "0.5.1",
        "rxjs": "6.0.0-beta.0",
        "to-string-loader": "1.1.5",
        "typescript": "2.7.2",
        "webpack": "3.8.1",
        "zone.js": "0.8.18"
    }
}
  • 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

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "suppressImplicitAnyIndexErrors": true,
        "lib": [ "es2015", "dom" ],
        "outDir": "./app/temp"
    },
    "angularCompilerOptions": {
        "genDir": "./app/temp",
        "skipMetadataEmit": true
    },
    "exclude": [
        "node_modules"
    ]
}

For more information about AOT please refer to the official Ahead-Of-Time Compiler Guide.

webpack.config.js

'use strict';
 
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
    entry: {
        main: './app/src/main.ts'
    },
 
    output: {
        path: path.resolve(__dirname + '/app'),
        filename: 'main.bundle.js'
    },
 
    module: {
        loaders:
        [
            {
                test: /\.ts$/,
                use: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            {
                test: /\.html$/,
                use: 'raw-loader'
            },
            {
                test: /\.css$/,
                use: ['to-string-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|gif|svg|pdf|ico)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
 
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.ProgressPlugin(),
        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)/, path.resolve(__dirname, './app'))
    ],
 
    resolve: {
        extensions: ['.ts', '.js']
    }
};

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

Step 3 - Build the app

I. index.html

Add the needed references and the <app-root></app-root> 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. 

<!DOCTYPE html>
<html>
 
    <head>
        <title>Angular BarGauge</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- Styles -->
        <link href="../node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" rel="stylesheet" />
 
        <!-- 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>
 
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
 
    <body>
        <app-root>Loading...</app-root>
        <script src="./main.bundle.js"></script>
    </body>
 
</html>

II. app.module.ts

III. main.ts

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

IV. app.component.ts

In the above example we create the widget through attributes.
There is another way through method called createComponent. It takes just one argument - an object containing the settings for the widget. 

import { Component, ViewChild, AfterViewInit } from '@angular/core';
 
import { jqxBarGaugeComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbargauge';
 
@Component({
    selector: 'app-root',
    template: 
        `<jqxBarGauge #myBarGaugeReference></jqxBarGauge>`
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myBarGaugeReference') myBarGauge: jqxBarGaugeComponent;
 
    ngAfterViewInit(): void {
        this.myBarGauge.createComponent(this.settings);
    }
 
    settings: any = {
        width: 600, 
        height: 600,
        max: 150,
        values: [102, 115, 130, 137], 
        colorScheme: "scheme02", 
        tooltip: {
            visible: true, 
            formatFunction: (value: string) =>
            {
                let realVal = parseInt(value);
                return ('Year: 2016<br />Price Index:' + realVal);
            }
    }
}

Now install the packages with npm install and execute the command npm start. A file named main.bundle.js will appear in the app folder. Finally open index.html.