Angular 2/TypeScript/Webpack Starter

This is the initial version of our starter project using Angular 2.x, TypeScript and Webpack to tie it all together.

Getting Started

Use our starter script, with angular2-starter as the techStack argument.

npm scripts

To see all available scripts:

$ npm run

Dev

$ npm run dev

This runs a development mode server with live reload etc.

Open http://localhost:8080 in your browser.

Production

$ npm install
$ npm start

$ npm run build
$ npm start

This runs a production-ready express server that serves up a bundled and minified version of the client.

Note: AoT is enabled by default. To disable AoT, use npm run build:jit.

Open http://localhost:8080 in your browser.

Tests

Single Run (with linting and coverage)

$ npm test
# or
$ npm t

Watch Files

$ npm run test:watch

Coverage

$ npm run cover

Webpack

Configurations:

For dev & jit: webpack.config.js
For production & AoT: webpack-aot.config.js

The webpack directory consists of:

loaders.js: definitions for all the loaders used in this project
plugins.js: definitions for all the plugins used in this project. These are grouped based on process.env.
postcss.js: configuration for the postcss plugin.

Bundle Profiling

If you want to analyze the contents and size of the production bundles you can run one of the following commands:

npm run profile-build for AoT builds
npm run profile-build:jit for JiT builds

These commands produce a stats.json manifest in the project root and also opens a web page using webpack-bundle-analyzer so that you can parse it visually.

Connecting to remote APIs

Both the devmode and production servers provide a way to proxy requests to remote HTTP APIs. This can be useful for working around CORS issues when developing your software.

Edit this file to mount such APIs at a given path.

Improvements

This is an initial version of this setup and will be expanded in the future. Refer to the issues section to see what needs to be done, or create a new one.

Issues for this particular starter project are tagged with the 'ng2' label.

If something doesn't work

We centralize issue management for all rangle starters in the rangle-starter repository, to help us keep things consistent.

Refer to the issues section to see if this has already been logged. Otherwise create a new issue.

Be sure to tag your new issue with the 'ng2' label so we can see which starter you're filing it for.

Example Application

An example app using this starter can be found here.

License

MIT License

rangle / angular2-starter