Setup Project
- Install Angular2 deps using npm
- Try to directly use
import { Stuff } from '@angular/core'
Setup Typescript
npm i typescript typings --save-dev
typings search core-js
for example to find typing definitions for Core-js polyfill- Install typings with
typings install --global --save dt~core-js
for example typings.json
should be created at root level- Add to
package.json
a scripts.postinstalltypings install
- We can now transpile code using
tsc --rootDir app --outDir dist
and make a npm.script out of it
Setup Webpack (https://webpack.github.io/docs/configuration.html)
- Webpack doesnt understand SystemJS and it needs commonjs
npm i webpack ts-loader --save-dev
- create
webpack.config.js
it's a node module using commonjs format require('webpack')
and thenmodule.exports = { [..conf..] }
entry
: string with the entry point (eg./src/main.ts
)output
: out configuration objectoutput.path
: out folder (eg:./dist
)output.filename
: complete out name- Since we use TS we need a loader for this, add a loader to the
module
object module.loaders
: array of loader objectsmodule.loaders[].test
: regexp matching files to apply loader onto (eg/\.ts$/
)module.loaders[].loader
: string with the name of the loader (egts-loader
)resolve.extensions
: array of extensions to be loaded by webpack (eg:['', '.js', '.ts']
)- To start bundling
webpack --progress
- Stuff that is not explicitly imported in our file like
reflect-metadata
is not automatically bundled so it may be worth importing this stuff manually in our entry-point file (egimport 'zone.js/dist/zone'
)
Webpack Templating
npm i html-webpack-plugin --save-dev
- In
webpack.config.js
you canrequire('html-webpack-plugin')
plugins
: array of * containing plugin configurationnew Plugin({ template: './src/index.html' })
- Now you can avoid manually including the bundle in the index.html
Webpack Optimizations
webpack --progress -p
produces a production build
Webpack DevServer
npm install --save-dev webpack-dev-server
webpack-dev-server --progress --inline
inline allows auto-reload, there are other ways