Hello world sample built with Angular2, Webpack, ngrx/store and TypeScript.
What you need to run this app:
node
andnpm
- Global or local install (npm module) of
webpack-dev-server
- Global or local install (npm module) of
typings
npm install
The package.json file has a postInstall command to install the necessary TypeScript dependencies (typings install
)
Note: There appears to be a peer dependence on having a local copy of the webpack and typescript modules. These are listed in the package.json as a devDependency.
The installed dependencies:
@angular/*
: Core angular framework libraries@ngrx/store
: State management library for Angular2reflect-metadata
: Used for browser polyfillszone.js
: Used for browser polyfillsrxjs
: Reactive Extensions used through Angular - specifically for Observablesangular2-hmr
: Hot module replacement tool for Angularawesome-typescript-loader
: TypeScript loader desigend for webpack. Faster than the commonly use ts-loadercore-js
: Used by Karma to work with es6css-loader
: Used for CSS loading and bundlinghtml-webpack-plugin
: Builds html files used with webpack bundlesjasmine-core
: unit test librarykarma*
: used to run unit tests*-loader
: Various loader modules to parse application filesless
: CSS preprocessorprotractor
: e2e test librarystyle-loader
: Combined with css-loader to load and bundle cssts-node
: used by protractor during e2e teststypescript
: TypeScript compilerwebpack
: Module loaderwebpack-merge
: Plugin to merge different files as part of the webpack operations.
At the time of writing, the primary webpack-dev-server
is the primary web server utilized in order to enable hot module replacement. The package.json includes start and start hot scripts:
npm run start
ornpm run start:hot
This operation will start a webpack-dev-server on localhost:8080
If the *:hot
flag is specified, the application will start a Socket.io to listen for module updates and replace dirty modules without a page refresh.