Configure Angular2 + Webpack + Maven Sample

Configure Angular2 + Webpack in Maven build.

---

Build application using Angular2 with Typescript, Webpack as Module Bundler and Maven as build environment. We will also use Angular 2 with bootstrap.js and jquery.js library

What is Webpack

Webpack is a powerful module bundler. A bundle is common JavaScript file that combine html data, css data, javascript data etc in common file together and should be served to the client in a response to a single file request. 

Let's start building application using Angular2 and Typescript. 
We will use Bootstrap + Jquery with Angular2 and Typescript in our sample application.

Download application from github: Angular2WebPackMaven

How output will look like:

Angular2 Typescript files:

1. index.html
    Application single page application html file which contain placeholder to display   
    components. 

2. main.ts
    Application entry point file, this is the place where we have imported all application 
    dependencies.

    index.html is simply a template, Required javascript's, css etc are mentioned in main.ts
    Also, which module to load in placeholder is also present in main.ts 

3. app folder
    It contains application typescript files (modules, component, services, routes, models etc)

4. resources folder
    It contains application external resources like javascript, css etc that need to be bundled.

5. package.json
    A package.json file contains meta data about our app. 
    It includes list of dependencies to install for development and production environment.

6. webpack.config.js
    Webpack configuration file


Download code from link : Angular2WebPackMaven


Steps to run the application:

1. After downloading the application, run "mvn install" in home directory as shown below,
    (It will take some time to download all development dependencies)

2. For running the application, go to browser and hit 
    "http://ip:port/Angular2WebPackMaven/angular2-webpack-maven"

You may also like to see

---

Number Range Spinner in Angular JS

Download binary file AngularJS + REST service

What is Websocket? How Websocket works? Program on updating total count of connected Clients.

Using JQuery Datatable with AngularJS

Top 25 Multithreading Interview Questions In Java

Enjoy !!!! 

If you find any issue in post or face any error while implementing, Please comment.