Angular 2 with ES6 — The 5 minute Quickstart

This tutorial does exactly what the 5 Minute Quickstart tutorial on the Angular 2 website does — building a “Hello World!” app. The only difference is that we’ll be doing this in ES6 Javascript while the Angular 2 website features tutorials only in TypeScript, Javascript (ES5) and Dart.

Not all of the ES6 features are supported out of the box by the browsers out there today. So we will have to transpile our ES6 code to ES5 so that it could run seamlessly on our current browsers. There are several tools out there that could do this task, and for this tutorial, we’ll be using Babel.

We’ll also bundle all of our source javascript files into one single file using a module bundling tool called Webpack. Support for Babel through Webpack is available in the form of plugins, and we’ll use them to automate the transpilation task. This means once we configure these plugins, we just have to write ES6 code and Webpack will take care of the rest.

The source code for this tutorial is hosted on Github.

varunmulloli/angular2-quickstart-es6-webpack

Directory structure

angular2-quickstart-es6-webpack/
|
|- public/
|  |- dist/
|  |- src/ 
|     |- app/
|     |  |- app.component.js
|     |  |- main.js
|     |
|     |- index.js
|
|- index.html
|- package.json
|- webpack.config.js

package.json

The package.json file is very similar to the one featured in the original Quickstart tutorial using Javascript ES5. The extra dependencies are:

• babel-core — Our transpilation tool.
• webpack — Our module bundling tool.
• babel-loader — Webpack plugin for Babel.
• babel-preset-es2015 — Babel’s collection of ES6 transforms.
• script-loader — Webpack plugin for adding external Javascript libraries into our bundled code so that we don’t have to include them separately in a <script> tag on our HTML page.

Installation

If you don’t have Node.js already installed on your machine, you can download and install it from the Node.js website. Once installed, you may verify your installation by typing the following on your command line/terminal.

npm -v

At the time of writing this, my npm version was 3.8.2.

To make use of the command line tools of Webpack, we’ll install it as a global module. Run the following command on your machine:

npm install webpack -g

The -g flag specifies the installation as global. Now let’s navigate to our project root directory and install all the dependencies for the project.

cd /path/to/angular2-quickstart-es6-webpack/
npm install

Once the installation is complete, all the dependencies specified in our package.json will be downloaded to node_modules/ folder.

webpack.config.js

This is our configuration file for Webpack. We have defined the entry point as public/src/index.js and it will resolve all the dependencies referenced by it recursively and the output bundle will be created as vendor.js at public/dist/ folder. This is the only file that we need to include in our HTML file.

The devtool: ‘source-map’ configuration generates source maps, which helps in the mapping of combined and minified source files to their original state, and is useful for debugging purposes.

The babel-loader configuration with es2015 preset is responsible for the transpilation task. If you want to know more about how to configure Babel with Webpack, here’s a great tutorial:

Using ES6 and ES7 in the Browser, with Babel 6 and Webpack

public/src/app/app.component.js

This file contains our visual component for our app, named AppComponent. ES6 does not support the annotation syntax that TypeScript uses for Angular 2 for representing class metadata. Instead it is done by defining a static get method called annotations inside the class and returning them as an array of objects.

The same behaviour can be achieved through defining a static property on the class named annotations.

public/src/app/main.js

This is where the bootstrapping logic of the app resides.

We could’ve added the bootstrapping logic to app.component.js, but instead we created a separate file called main.js. This is because a component’s responsibility is to present and manage a view, not launching the application. Those two are different concerns. Also this pattern helps in testability and reusability of the code as well.

public/src/index.js

This file is our entry point to Webpack.

Along with our main.js file, we’ll add all the libraries that were loaded using <script> tags in the index.html file in the original tutorial, and they’ll be loaded using Webpack’s script-loader plugin. The !!script! is a special flag that will inline the script in our bundle, equivalent to using a <script> tag in HTML.

Webpack reads this file, resolve all the dependencies referenced by it recursively and the outputs the bundled Javascript file.

index.html

This is the HTML page loaded by our browser.

Bundling of modules gets rid of all the <script> and <link> tags in our index.html file. Note that the public/dist/vendor.js file doesn’t exist yet. Our app is now complete and now we’ll go ahead and create the vendor.js file.

Creating the vendor.js file

To create the output bundle, navigate to your project root directory and run the Webpack command on your command line.

cd /path/to/angular2-quickstart-es6-webpack/
webpack --progress

If successful, two new files will be created inside public/dist/ directory, viz. vendor.js and vendor.js.map. The latter is the source map file.

Running the app

Assuming you are still in the project root directory, run the command

npm start

This will trigger the lite-server and it will load index.html on a browser window automatically. Now you should be able to see My First Angular 2 App on the browser window.