[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