Techumber
Home Blog Work

Angular 2 Quickstart using Browserify

Published on November 13, 2016

Unlike Angular 1 for Angular 2 needs a minimal setup to start building the applications.

I want to use Angular 2 to build simple web components like React does. I mean I don’t need any routing or any Authentication or anything like that but I want a simple web component.

Also, I should be able to distribute them like a Jquery Plugins or React or Polymer Components. I mean just add some .js or/and .css minified files and some simple set up.

For example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Comment Box example</title>
  </head>
  <body>
    <comment-box></comment-box>
    <script src="./app.min.js"></script>
  </body>
</html>

See here I want to have a comment box all I had to do it add app.min.js and <comment-box></comment-box>

First, let’s see available way to start creating Angular 2 application.

One is by using Systemjs Approach. If you got to Angular 2 website you will find this approach for their Quick start gudience. (Angular 2 Quick start).

This is pretty good but it has some limitations. You can’t use it for production.

Secondly is by using Angular-cli It’s good for large scale application development but it has a lot to setup. It’s too many files. It’s not for a simple single component development.

Now, Let’s see another way. My way.

I have been using browserify for a very long time. It’s a very simple one. You don’t need to have a long config file. By using single line command you can do a lot of things.

Ok, Let’s do it step by step

Open your terminal and initialize your application with.

Step 1

npm init

Answer all it’s questions.

Install all dependencies for Angular 2.

Step 2

npm i @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic core-js rxjs ts-helpers zone.js --save

Step 3

npm i @types/core-js browserify budo tsify typescript factor-bundle uglify-js --save-dev

Step 4

create a src folder inside it add a vendor.ts and main.ts file.

in your vendor.ts

// Polyfills
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// TODO: disable for production
import 'zone.js/dist/long-stack-trace-zone';

// Typescript emit helpers polyfill
import 'ts-helpers';

import 'rxjs';

in your main.ts

import './vendor';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// App component
@Component({
  selector: 'my-app',
  template: `
    <h1>Hellow Angular</h1>
  `,
})
export class AppComponent {
  consturctor() {
    console.log('Init App Component');
  }
}

// App module
@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// Init App
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

// this is only for dev mode.
document.write('<my-app></my-app>');

I will explain why I added document.write('<my-app></my-app') later.

In this code, we imported all dependencies file in the first line by adding import './vendor' Then we create a Angular 2’s Component, Module and finally bootstraped it.

Step 4

Fire up the application by running this command.

budo src/main.dev.ts:dist/app.js: --live --open  --  -p tsify

That’s it. Now you should see your application running on your local host on a certain port.

In this command, we are using it’s a browserify’s dev server. This will auto detect the change and reload the browser also.

Now to generate distributable minified code run following two commands. Before you do this make sure to create a folder dist.

browserify src/main.prod.ts src/vendor.ts -p tsify -p [ factor-bundle -o dist/main.js -o dist/vendor.js ] -o dist/common.js

uglifyjs dist/common.js dist/vendor.js  dist/main.js --mangle-props --name-cache > dist/app.min.js

This will create a vendor.js,main.js,common.js and app.min.js. You can ignore first three and share app.min.js.

Insted of doing above steps again for other projects we can add them to scripts section of package.json

package.json

Final package.json will be something like this.

{
  "name": "browserify-Angular2-quickstart",
  "version": "1.1.1",
  "description": "anqular2 quickstart  application with browserify,tsify,budo",
  "main": "index.js",
  "scripts": {
    "build": "browserify src/main.prod.ts src/vendor.ts -p tsify -p [ factor-bundle -o dist/main.js -o dist/vendor.js ] -o dist/common.js",
    "start": "budo src/main.dev.ts:dist/app.js: --live --open --title=\"Angular2 Quickstart\"  --  -p tsify",
    "preminify": "npm run build",
    "minify": "uglifyjs dist/common.js dist/vendor.js  dist/main.js --mangle-props --name-cache > dist/app.min.js"
  },
  "keywords": ["Angular2", "quickstart", "browserify", "tsify", "budo"],
  "author": "Dimpu Aravind Buddha",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.1.2",
    "@angular/compiler": "^2.1.2",
    "@angular/core": "^2.1.2",
    "@angular/platform-browser": "^2.1.2",
    "@angular/platform-browser-dynamic": "^2.1.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.0-beta.12",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "browserify": "^3.7.0",
    "budo": "^9.2.1",
    "factor-bundle": "^2.5.0",
    "tsify": "^2.0.2",
    "tslint": "^3.15.1",
    "typescript": "^2.0.9",
    "uglify-js": "^2.7.4"
  }
}

You can see the complete code here.

Don’t you think this so much better than other methods?