Angular Webpack Starter

Live Production Build Demo

Introduction

Welcome to Angular Webpack Starter! This starter contains almost everything you need to start developing Angular.

This repo is evolved from Angular Starter

Why choose this starter?

Extensible via ngstarter extensions
Complete workflow from serve, lint, unit test, e2e test, to bundling
Support dotenv Environment Variables
100% code coverage
100% CI/CD pipeline ready
No global package installation
You can tune it as you wish, no blackbox

What's included?

TypeScript for the base language
- with Typings for TypeScript definition manager
Webpack Dev Server for development server & reload capability
Lite Server for production build server
Codelyzer for static code analyzer
Karma for test-runner
Jasmine for test framework
Istanbul for test coverage
- with Remap Istanbul for remapping Javascript to TypeScript coverage

Please visit the wiki for more details.

Prerequisites

You need to have Node.js and npm

Support Node v6.9 - latest
Support npm v3 - latest
Support Yarn

Installation

Download the starter from releases page

Go to the starter directory and install the packages (Yarn is recommended):

npm install

Then copy .env.example and rename it as .env. For more details

Start

Let's start up, run following:

// Build DLL first, run this once after adding new package
npm run build:dll

// Start the app
npm start

and done! Open a browser and go to http://localhost:8080 and you can start developing Angular! Every changes to the file will refresh the browser automatically and it'll also compile your changed TypeScripts files to Javascript files.

If any error occured when starting, please retry npm run build:dll. That means DLL build is too old and need to be refreshed.

Testing

This starter comes with testing workflow

Unit testing

Just run

npm test

and it'll compile all TypeScript files, start Karma, then remap Istanbul coverage so that it shows TypeScript coverage, not the transpiled JavaScript coverage.

E2E testing

Firstly start the server:

npm start

To begin testing, run:

npm run e2e

Production

For more details, visit Continuous Integration wiki

You can create production build by running:

npm run build

or you can create production build and then serve it using Lite Server by running:

npm run serve:build

Extension

You can extend this starter with many extensions built by the community. Browse the extensions here

Contributing

Feel free to submit a PR if there are any issues or new features, please read this before

Special thanks

For all contributors who have helped this starter improvement
John Papa for his awesome angular-styleguide and Tour of Heroes
Julie Ralph for her ng2-test-seed which helped me a lot to get started with testing feature
Patrick JS for his [angular2-webpack-starter] (https://github.com/AngularClass/angular2-webpack-starter)
@qdouble for his Angular2Webpack2 Starter

License

MIT

antonybudianto/angular-webpack-starter