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
                        

Step 2 - Install and configurate all required packages

Let's take a look at the config files:

package.json

• 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

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

webpack.config.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.

II. app.module.ts

III. main.ts

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.

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.