Toolbox

Like all frameworks today, setup requires additional modules. 

• Node / npm
• Webpack
  • (ES6)
  • Typescript
• Angular 2 (beta v.12)

What is Webpack? 

Webpack is a module bundler based on your app's dependencies into a single or multiple files.

It is also a task runner through the use of loaders. 

What is ES6 (ES2015)? 

It’s the next version of JavaScript, and it has some great new features (sugar).

let a = 0; // Block-level scoped only!

const b = { foo: 'bar' } // read-only REFERENCE to a value (not immutable)

(c) => c * 2 
// equivalent 
function(c) {
    return c * 2; 
}

/* String */

'foobar'.startsWith('foo'); //true
'foobar'.endsWith('foo'); // false
'foobar'.includes('bar'); // true

// String interpolation
let name = 'JavaScript'; 
console.log(`Hello world, love ${name}!`); // Prints "Hello world, love JavaScript!"
// equivalent
"Hello world, love " + name + "!"

What is TypeScript? 

• Typed superset of JavaScript, transpiles down to ES5 JavaScript
• Developed by Microsoft, endorsed by Angular 2 devs
• Also includes some ES6 features 
  • Sometimes hard to distinguish

function greeter(person: string) {
    return "Hello, " + person;
}

let name = "TypeScript";
console.log(greeter(name)); 
// Prints "Hello, TypeScript"

let numbers = [0, 1, 2];
console.log(greeter(numbers)); 
// Error: Supplied parameters do not 
// match any signature of call target

Set up dev environment

git clone https://github.com/filoxo/ng2-webpack-starter.git

If cloning:

• Open package.json
• Change rxjs version to '5.0.0-beta.4'
  • v2 is broken right now
    https://github.com/ReactiveX/rxjs/issues/1595
• Then `npm install` 

1. mkdir ng2-profile
2. cd ng2-profile
3. npm init -y
   
    
4. Install and save dependencies
5. Create tsconfig.json 
6. Edit package.json, add scripts
7. Create webpack.config.js
8. npm start

npm i angular2@2.0.0-beta.12 es6-shim reflect-metadata rxjs@5.0.0-beta.2 zone.js -S
npm i webpack-dev-server ts-loader typings -D
npm i webpack typescript -g

1. mkdir ng2-profile
2. cd ng2-profile
3. npm init -y
4. Install and save dependencies
5. Create tsconfig.json
   
   
   
   
   
   
   
    
6. Edit package.json, add scripts
7. Create webpack.config.js
8. npm start

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

1. mkdir ng2-profile
2. cd ng2-profile
3. npm init -y
4. Install and save dependencies
5. Create tsconfig.json 
6. Edit package.json, add scripts
   
   
    
7. Create webpack.config.js
8. npm start

"build": "webpack",
"start": "webpack-dev-server",
"typings": "typings",
"postinstall": "typings install"

1. mkdir ng2-profile
2. cd ng2-profile
3. npm init -y
4. Install and save dependencies
5. Create tsconfig.json 
6. Edit package.json, add scripts
7. Create webpack.config.js
    
8. npm start

var webpack = require("webpack");
module.exports = {
  entry: {
    "vendor": "./src/vendor/vendor",
    "app": "./src/main"
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js"
  },
  resolve: {
    extensions: ['', 
      '.webpack.js', 
      '.web.js', 
      '.ts', 
      '.js']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(
      /* chunkName= */"vendor", 
      /* filename= */"./vendor.bundle.js"
    )
  ]
};