notbdougie / angular2-ts-seed

angular2-ts-seed

A complete, yet simple, starter for Angular 2 using TypeScript.

This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using Webpack 2 for building our files and assisting with boilerplate.

Notable features

• TS
  • TS linting with TSLint, additional angular2 specific rules with Codelyzer.
  • Generate scaffold files (component, directive, pipe, service, route, action -, reducer -, selector-, effect for ngrx) with plop.
• CSS
  • Sass support with Libsass for super fast compiles.
  • Autoprefixer adds vendor prefixes to CSS rules by Can I use database.
  • CSSNext to use tomorrow’s CSS syntax, today.
  • PostCSS Assets - An asset manager for CSS.
  • PostCSS Focus - Add :focus selector to every :hover for keyboard accessibility.
  • CSS linting with stylelint, doiuse and colorguard.
  • Sourcemaps for global CSS.
• Development mode
  • Fast TS re-bundling.
  • File Watching and page reloading.
• Production builds
  • TS and CSS minification.
  • Cache busting.
  • Local sever for testing production build.

Is Angular 2 Ready Yet?

Quick start

# clone our repo
$ git clone https://github.com/codewareio/angular2-ts-seed.git my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm i

# start mock json api
$ npm run start:mock-api

# start webpack-dev-server in a separate terminal session
$ npm start

navigate to http://localhost:3000 or http://0.0.0.0:3000 in your browser.

Table of Contents

• Getting Started
  • Dependencies
  • Installing
  • Running the app
• Other commands
• Frequently asked questions

Dependencies

What you need to run this app:

• node and npm (use NVM)
• Ensure you're running Node (v4.1.x+) and NPM (2.14.x+)

Installing

• fork this repo
• clone your fork
• npm i to install all dependencies
• npm run start:mock-api to start mock json api
• npm start to start webpack-dev-server
• navigate to http://localhost:3000

Running the app

After you have installed all dependencies you can now run the app. Run npm start to start a local server using webpack-dev-server which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://0.0.0.0:3000 (or if you prefer IPv6, if you're using express server, then it's http://[::1]:3000).

Other commands

Please note, not all commands will be listed here, feel free to check out the npm scripts section in package.json.

build files for production and serve it

# production build
$ npm run build

# serve it, on port 8080
$ npm run start:prod

serve, watch and build files

$ npm start

# or

$ npm run start:dev

run linters

# run js lint
$ npm run lint:ts

# run scss lint
$ npm run lint:scss

generate scaffold files with plop

You can generate component, directive, pipe, service, route, action -, reducer -, selector-, effect for ngrx.

$ npm run generate

Frequently asked questions

• What's the current browser support for Angular 2 Beta?
  • Please view the updated list of browser support for Angular 2
• How do I start the app when I get EACCES and EADDRINUSE errors?
  • The EADDRINUSE error means the port 3000 is currently being used and EACCES is lack of permission for webpack to build files to ./dist/
• What are the naming conventions for Angular 2?
  • Angular 2 Style Guide
• Some dependencies are not met, what's going on?
  • es6-shim and reflect-metadata are dependencies of angular 2. We decided to include core-js as a better replacement.
• What is the .github folder for?
  • Read more about it here: Issue and Pull Request templates. Long story short, it is not a vital part of the project. Feel free to delete it.