Angular 2 Quickstart using Browserify

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 Angualr-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-angualr2-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=\"angualr2 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": [
    "angualr2",
    "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?

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.