Angular UI Components Documentation
Using Angular WebPack and jQWidgets
You can also download the final result.
Steps:
- Create your project folder structure
- Configurate and install all required packages
- 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
- 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.