Introduction

A seed project for Angular 2 apps using Sass. Derived from mgechev/angular2-seed.

It is something similar to the Angular Quick Start but does the entire build with gulp.

angular2-seed-sass provides the following features:

• Allows you to painlessly update the seed tasks of your already existing project.
• Ready to go, statically typed build system using gulp for working with TypeScript.
• Production and development builds.
• Sample unit tests with Jasmine and Karma including code coverage via istanbul.
• End-to-end tests with Protractor.
• Development server with Livereload.
• Following the best practices for your application’s structure.
• Manager of your type definitions using typings.
• Has autoprefixer and sass-lint support.
• Basic Service Worker, which implements "Cache then network strategy".
• Sass-enabled styling.

How to start

Note that this seed project requires node v4.x.x or higher and npm 2.14.7.

You must have ts-node installed as global. If you don't, use:

npm install -g ts-node

In order to start using seed:

git clone --depth 1 https://github.com/archfirst/angular2-seed-sass.git
cd angular2-seed-sass
# install the project's dependencies
npm install
# watches your files and uses livereload by default
npm start
# api document for the app
npm run docs

# dev build
npm run build.dev
# prod build
npm run build.prod

Does not rely on any global dependencies.

Table of Content

• Introduction
• How to start
• Table of Content
• Configuration
• How to extend?
• Running tests
• Contributing
• Directory Structure
• Change Log
• License

Configuration

Default application server configuration

var PORT             = 5555;
var LIVE_RELOAD_PORT = 4002;
var DOCS_PORT        = 4003;
var APP_BASE         = '/';

Configure at runtime

npm start -- --port 8080 --reload-port 4000 --base /my-app/

How to extend?

Visit the Wiki page of the project.

Running tests

npm test

# Debug - In two different shell windows
npm run build.test.watch      # 1st window
npm run karma.start           # 2nd window

# code coverage (istanbul)
# auto-generated at the end of `npm test`
# view coverage report:
npm run serve.coverage

# e2e (aka. end-to-end, integration) - In three different shell windows
# Make sure you don't have a global instance of Protractor

# npm run webdriver-update <- You will need to run this the first time
npm run webdriver-start
npm run serve.e2e
npm run e2e

# e2e live mode - Protractor interactive mode
# Instead of last command above, you can use:
npm run e2e.live

You can learn more about Protractor Interactive Mode here

Contributing

Please see the CONTRIBUTING file for guidelines.

Directory Structure

.
├── LICENSE
├── README.md
├── gulpfile.ts                <- configuration of the gulp tasks
├── karma.conf.js              <- configuration of the test runner
├── package.json               <- dependencies of the project
├── protractor.conf.js         <- e2e tests configuration
├── src                        <- source code of the application
│   ├── home
│   │   └── components
│   ├── index.html
│   ├── main.ts
│   ├── shared
│   │   └── services
│   │       ├── name-list...
│   │       └── name-list...
│   └── sw.js                  <- sample service worker
├── test-main.js               <- testing configuration
├── tools
│   ├── README.md              <- build documentation
│   ├── config
│   │   ├── project.config.ts  <- configuration of the specific project
│   │   ├── seed.config....
│   │   └── seed.config.ts     <- generic configuration of the seed project
│   ├── config.ts              <- exported configuration (merge both seed.config and project.config, project.config overrides seed.config)
│   ├── debug.ts
│   ├── manual_typings
│   │   ├── project            <- manual ambient typings for the project
│   │   │   └── sample.pac...
│   │   └── seed               <- seed manual ambient typings
│   │       ├── merge-stre..
│   │       └── slash.d.ts
│   ├── tasks                  <- gulp tasks
│   │   ├── project            <- project specific gulp tasks
│   │   │   └── sample.tas...
│   │   └── seed               <- seed generic gulp tasks. They can be overriden by the project specific gulp tasks
│   ├── utils                  <- build utils
│   │   ├── project            <- project specific gulp utils
│   │   │   └── sample_util...
│   │   ├── project.utils.ts
│   │   ├── seed               <- seed specific gulp utils
│   │   │   ├── clean.ts
│   │   │   ├── code_change...
│   │   │   ├── server.ts
│   │   │   ├── tasks_tools.ts
│   │   │   ├── template_loc...
│   │   │   ├── tsproject.ts
│   │   │   └── watch.ts
│   │   └── seed.utils.ts
│   └── utils.ts
├── tsconfig.json              <- configuration of the typescript project (ts-node, which runs the tasks defined in gulpfile.ts)
├── tslint.json                <- tslint configuration
├── typings                    <- typings directory. Contains all the external typing definitions defined with typings
├── typings.json
└── appveyor.yml

Change Log

You can follow the Angular 2 change log here.

License

MIT