**Note: This guide is following the Angular's Style Guide

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

This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using Rollup for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests. This starter code was ported from this Webpack Starter Code. If you are interested in helping out, please contribute to this repository.

• Best practices in file and application organization for Angular 2.
• Ready to go build system using Rollup) for working with TypeScript.
• Testing Angular 2 code with Jasmine and Karma.
• Coverage with Istanbul
• End-to-end Angular 2 code using Protractor.
• Stylesheets with SASS (not required, it supports regular css too).
• Error reported with TSLint and Codelyzer.

Warning: Make sure you're using the latest version of Node.js and NPM

Is Angular 2 Ready Yet?

Clone/Download the repo then edit app.ts inside /src/app/app.component.ts

# clone the repo
$ git clone https://github.com/steveblue/angular2-rollup-starter my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm install

# start the watchers (currently this task doesn't start the server)
$ npm start

#open a new terminal window and start live-server
& npm run dev:server

go to http://localhost:4200 in your browser.

• Getting Started
  • Dependencies
  • Installing
  • Developing
  • Testing
  • Production
• Frequently asked questions
• TypeScript
• License

What you need to run this app:

• node and npm (Use NVM)
• Ensure you're running Node (v5.x.x+) and NPM (3.x.x+)

• fork this repo
• clone your fork
• npm install to install all dependencies

After you have installed all dependencies you can now build the project:

• npm start

Start the watchers with the following command:

• npm run watch

Then start the development server:

• npm run dev:server

It will start a local server using live-server and combined with nodemon will watch, build (in-memory), and reload for you. The application can be checked at http://localhost:4200.

Not 100% sure testing works, it was ported from another starter code project. If you want to try it out and submit a Pull Request with fixes, pelase do so.

• single run: npm test

• single run:
  • in a tab, if not already running!: npm start
  • in a new tab: npm run webdriver:start
  • in another new tab: npm run e2e
• interactive mode:
  • instead of the last command above, you can run: npm run e2e:live
  • when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
  • you can learn more about Protractor Interactive Mode here

To build your application, run:

• npm run build:dev

You can now go to /dist and deploy that to your server!

The production build adds minification via Uglify.

• npm run build:prod

Yes, as of right now this starter package will not handle this for you but it is possible. The typical Angular 2 dependencies have been added for you and you can configure more in static.config.js. A script runs that copies each dependency into /dist/lib (or wherever you specify in the config). You can then reference the library in index.html like so:

    <script src="/lib/zone.js/dist/zone.js"></script>
    <script src="/lib/reflect-metadata/Reflect.js"></script>

NOTE: Entire dependency folders are copied from node_modules to dist/lib.

It's simple, just install the lib via npm, import it into src/vendor.ts and then import in your code when you need it. Don't forget that you need to configure some external libs in the bootstrap of your application.

To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

We have good experience using these editors:

• Visual Studio Code
• Webstorm 11+
• Atom with TypeScript plugin
• Sublime Text with Typescript-Sublime-Plugin

MIT