04.06

Angular 2 SeedTypeScript starter project

Angular 2 is getting ready and I wanted a simple boilerplate for upcoming web apps. So I created an own Angular 2 seed based on TypeScript, Sass, SystemJS and Gulp. The seed consists of a minimalistic single page app with some common features.

Angular 2 Seed - A basic Angular 2 TypeScript starter project

To get a picture, I’ve listed most important aspects of the seed here. The project comes with:

  • a routing concept (separate route configuration file)
  • login and dashboard view components (authorized/public routes)
  • error page handling
  • a directive (form inputs)
  • a service (authorization)
  • a pipe (determine the active route)
  • uses es6-shim, Reflect, Rx.js and Zone.js

The project was developed with an IDE in mind so the Gulp configuration works well with or without an editor that has integrated TypeScript/Sass compilation (like WebStorm or Visual Studio). Gulp is mandatory for the creation of the Angular 2 bundle and copying polyfills so you don’t need to link to modules from node_modules inside your web app. Gulp can be used for compiling TypeScript/Sass and runnig a local web server with file watchers. There are also Gulp tasks for deploying a production environment: all JavaScript and CSS code will be concatenated into a single file. The index.html contains a minimal pre-processing condition for production.

Head over to the online demo to see the components, directives and services in action. There is a sample dashboard view which represents an area for authorized users.

The project is available on GitHub and currently relies on Angular 2 RC4.