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
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:
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)
"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.
Post a Comment