[YouTube] Angular 2 with Webpack Project Setup

https://www.youtube.com/watch?list=PLgGUMhSgtxJyIQ4vI3BzlCzZLHL79Ew6p&v=HTFZPF6iixA

MySRC:
https://bitbucket.org/marley-angular/angular-2-with-webpack-project-setup/


Angular 2 with Webpack Project Setup - Part 1: NPM Dependencies


package.json

{
  "name": "angular_2_webpack",
  "version": "0.0.1"
}


Dependencies:

$ npm install --save \
@angular/common \
@angular/compiler \
@angular/core  \
@angular/forms  \
@angular/http  \
@angular/platform-browser  \
@angular/platform-browser-dynamic  \
@angular/router  \
core-js  \
reflect-metadata \
rxjs  \
zone.js


devDependencies:

$ npm install --save-dev \
typescript \
typings \
webpack \
ts-loader \
html-webpack-plugin \
webpack-dev-server \
raw-loader \
cross-env


Angular 2 with Webpack Project Setup - Part 2: TypeScript Compiler and Typings

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "experimental": true,
        "emitDecoratorMetadata": true
    }
}


$ npm bin
/project/node_modules/.bin


$ $(npm bin)/tsc -v
Version 2.0.3


$ $(npm bin)/tsc --rootDir src --outDir dist

Errors:

Cannot find name 'Promise'.
Cannot find name 'Map'
Cannot find name 'Set'


typings

$ $(npm bin)/typings -v                         
1.4.0


s $(npm bin)/typings search core-js
Viewing 1 of 1

NAME    SOURCE HOMEPAGE                             DESCRIPTION VERSIONS UPDATED                 
core-js dt     https://github.com/zloirock/core-js/             1        2016-09-14T11:45:59.000Z


dt - definitely typed


$ $(npm bin)/typings install --global --save dt~core-js


$ $(npm bin)/tsc --rootDir src --outDir dist

no more errors


Angular 2 with Webpack Project Setup - Part 3 NPM Scripts

package.json has been updated

$ npm install


$ npm run build


browser -> run index.html from src folder.


ReferenceError: require is not defined


Angular 2 with Webpack Project Setup - Part 4 Webpack

$ npm install --save-dev \
webpack \
ts-loader


$ $(npm bin)/webpack --progress


browser -> run index.html from src folder.


reflect-metadata shim is required when using class decorators

$ npm run build


Angular 2 with Webpack Project Setup - Part 5 Webpack Dev Server

$ npm install --save-dev html-webpack-plugin


$ npm run build:prod


$ npm install --save-dev webpack-dev-server


$ npm run serve