Forward Advance Learning

Building Angular 2 with Webpack

As we have seen, Webpack allows us to split our app across multiple files. We can also use it to manage dependencies. In this section we will use Webpack to modularise our Angular 2 code.

package.json

There are quite a lot of dependencies. We can get them from NPM. Create a package.json file and put the following in it:

{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -wd"
},
"author": "",
"license": "ISC",
"dependencies": {
},
"devDependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

Now run npm install to get them all. Presto, we can now make use of the dependencies in our code.

app.js

Create a file called source/app.js. This will be our entry file. In this file we want to require all our Angular dependencies, and bootstrap the app component.

require('reflect-metadata');
require('rxjs');
require('zone.js');
var { platformBrowserDynamic } = require('@angular/platform-browser-dynamic');
var AppModule = require('./app.module');
platformBrowserDynamic().bootstrapModule(AppModule);

app.component.js

Now we need to create the actual app component. Make a file called source/app.component.js and put the following into it:

var {Component} = require('@angular/core');
module.exports = Component({
selector: "app",
template:
`
Hello Webpack!
`
})
.Class({
constructor: function() {
}
})

The Module

Now we need an ngModule. Build your module like this:

var {NgModule} = require('@angular/core');
var {BrowserModule} = require('@angular/platform-browser');
var AppComponent = require('./app.component');
module.exports = NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
.Class({
constructor: function() {
}
});

A note on naming conventions

It has become traditional in Angular to name components after their domain, subdomains, and type, going from least specific to most specific. This helps keep related files together. For example:

  • app.component.js
  • cat.component.js
  • cat.service.js
  • cat.admin.component.js

This makes it easy to

Build with webpack.

Run webpack source/app.js build/app.js -dw to begin building your app.

index.html

Now we just need some html:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<app></app>
<script src="build/app.js"></script>
</body>
</html>

Notice that the only script dependency is app.js. This is because we are requiring everything else into app.js.

Easy Exercise - Build some Angular

First up, create the hello world above. You can download the exercise start point from the repository to get you started. Download the dependencies with npm install. Build the app with webpack, then preview in a browser.

Escape the Dungeon Exercise - Build with Webpack

Now take your escape the dungeon app and convert it to use Webpack. Each component and model should live in it's own file.