├── .editorconfig ├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE.md ├── .gitignore ├── .jshintrc ├── .sass-lint.yml ├── .travis.yml ├── LICENSE ├── README.md ├── appveyor.yml ├── gulpfile.ts ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src ├── about │ └── components │ │ ├── about.component.e2e.ts │ │ ├── about.component.html │ │ ├── about.component.scss │ │ ├── about.component.spec.ts │ │ └── about.component.ts ├── app │ └── components │ │ ├── app.component.e2e.ts │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── navbar.component.html │ │ ├── navbar.component.scss │ │ ├── navbar.component.ts │ │ ├── toolbar.component.html │ │ ├── toolbar.component.scss │ │ └── toolbar.component.ts ├── assets │ ├── _colors.scss │ ├── _variables.scss │ ├── main.scss │ └── svg │ │ └── more.svg ├── home │ └── components │ │ ├── home.component.e2e.ts │ │ ├── home.component.html │ │ ├── home.component.scss │ │ ├── home.component.spec.ts │ │ └── home.component.ts ├── hot_loader_main.ts ├── index.html ├── main.ts ├── shared │ └── services │ │ ├── name-list.service.spec.ts │ │ └── name-list.service.ts └── sw.js ├── test-main.js ├── tools ├── .gitignore ├── README.md ├── config.ts ├── config │ ├── project.config.ts │ ├── seed.config.interfaces.ts │ └── seed.config.ts ├── debug.ts ├── manual_typings │ ├── project │ │ └── sample.package.d.ts │ └── seed │ │ ├── angular2-hot-loader.d.ts │ │ ├── autoprefixer.d.ts │ │ ├── colorguard.d.ts │ │ ├── connect-livereload.d.ts │ │ ├── cssnano.d.ts │ │ ├── doiuse.d.ts │ │ ├── express-history-api-fallback.d.ts │ │ ├── istream.d.ts │ │ ├── karma.d.ts │ │ ├── merge-stream.d.ts │ │ ├── open.d.ts │ │ ├── postcss-reporter.d.ts │ │ ├── slash.d.ts │ │ ├── stylelint.d.ts │ │ ├── systemjs-builder.d.ts │ │ ├── tildify.d.ts │ │ └── tiny-lr.d.ts ├── tasks │ ├── project │ │ └── sample.task.ts │ └── seed │ │ ├── build.assets.dev.ts │ │ ├── build.assets.prod.ts │ │ ├── build.bundles.app.ts │ │ ├── build.bundles.ts │ │ ├── build.docs.ts │ │ ├── build.html.ts │ │ ├── build.index.dev.ts │ │ ├── build.index.prod.ts │ │ ├── build.js.dev.ts │ │ ├── build.js.e2e.ts │ │ ├── build.js.prod.ts │ │ ├── build.js.test.ts │ │ ├── build.js.tools.ts │ │ ├── build.scss.ts │ │ ├── check.versions.ts │ │ ├── clean.all.ts │ │ ├── clean.dev.ts │ │ ├── clean.prod.ts │ │ ├── clean.tools.ts │ │ ├── copy.js.prod.ts │ │ ├── karma.start.ts │ │ ├── sass-lint.ts │ │ ├── serve.coverage.ts │ │ ├── serve.docs.ts │ │ ├── server.prod.ts │ │ ├── server.start.ts │ │ ├── tslint.ts │ │ ├── watch.dev.ts │ │ ├── watch.e2e.ts │ │ └── watch.test.ts ├── utils.ts └── utils │ ├── project.utils.ts │ ├── project │ └── sample_util.ts │ ├── seed.utils.ts │ └── seed │ ├── clean.ts │ ├── code_change_tools.ts │ ├── server.ts │ ├── tasks_tools.ts │ ├── template_locals.ts │ ├── tsproject.ts │ └── watch.ts ├── tsconfig.json ├── tslint.json └── typings.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Submitting Pull Requests 2 | 3 | **Please follow these basic steps to simplify pull request reviews - if you don't you'll probably just be asked to anyway.** 4 | 5 | * Please rebase your branch against the current master 6 | * Run ```npm install``` to make sure your development dependencies are up-to-date 7 | * Please ensure that the test suite passes **and** that code is lint free before submitting a PR by running: 8 | * ```npm test``` 9 | * If you've added new functionality, **please** include tests which validate its behaviour 10 | * Make reference to possible [issues](https://github.com/mgechev/angular2-seed/issues) on PR comment 11 | 12 | ## Submitting bug reports 13 | 14 | * Please detail the affected browser(s) and operating system(s) 15 | * Please be sure to state which version of node **and** npm you're using 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Description** 2 | 3 | _[Describe the issue. What is the current behavior vs. the expected behavior?]_ 4 | 5 | **Steps to Reproduce** 6 | 7 | _[What steps should we try to reproduce the problem?]_ 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | /node_modules/ 26 | /typings/ 27 | 28 | # Users Environment Variables 29 | .lock-wscript 30 | .tsdrc 31 | .typingsrc 32 | 33 | #IDE configuration files 34 | .idea 35 | .vscode 36 | *.iml 37 | 38 | /tools/**/*.js 39 | dist 40 | dev 41 | docs 42 | lib 43 | test 44 | tmp 45 | 46 | gulpfile.js 47 | gulpfile.js.map 48 | 49 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "camelcase": true, 4 | "curly": true, 5 | "eqeqeq": true, 6 | "es3": false, 7 | "forin": true, 8 | "freeze": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": "nofunc", 12 | "newcap": true, 13 | "noarg": true, 14 | "noempty": true, 15 | "nonbsp": true, 16 | "nonew": true, 17 | "plusplus": false, 18 | "quotmark": "single", 19 | "undef": true, 20 | "unused": false, 21 | "strict": false, 22 | "maxparams": 10, 23 | "maxdepth": 5, 24 | "maxstatements": 40, 25 | "maxcomplexity": 8, 26 | "maxlen": 140, 27 | 28 | "asi": false, 29 | "boss": false, 30 | "debug": false, 31 | "eqnull": true, 32 | "esnext": false, 33 | "evil": false, 34 | "expr": false, 35 | "funcscope": false, 36 | "globalstrict": false, 37 | "iterator": false, 38 | "lastsemic": false, 39 | "laxbreak": false, 40 | "laxcomma": false, 41 | "loopfunc": true, 42 | "maxerr": false, 43 | "moz": false, 44 | "multistr": false, 45 | "notypeof": false, 46 | "proto": false, 47 | "scripturl": false, 48 | "shadow": false, 49 | "sub": true, 50 | "supernew": false, 51 | "validthis": false, 52 | "noyield": false, 53 | 54 | "browser": true, 55 | "node": true, 56 | 57 | "globals": { 58 | "angular": false, 59 | "ng": false 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /.sass-lint.yml: -------------------------------------------------------------------------------- 1 | rules: 2 | indentation: 3 | - 2 4 | - 5 | size: 2 6 | force-element-nesting: 0 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 4 4 | - stable 5 | 6 | sudo: false 7 | 8 | before_install: 9 | - export CHROME_BIN=chromium-browser # Karma CI 10 | - export DISPLAY=:99.0 11 | 12 | before_script: 13 | - sh -e /etc/init.d/xvfb start 14 | # - nohup bash -c webdriver-manager start 2>&1 & # Protractor CI 15 | - sleep 1 # give server time to start 16 | 17 | after_failure: 18 | - cat /home/travis/build/mgechev/angular2-seed/npm-debug.log 19 | 20 | branches: 21 | only: master 22 | 23 | notifications: 24 | email: true 25 | webhooks: 26 | urls: https://webhooks.gitter.im/e/565e4b2fed3b96c1b964 27 | on_success: change # options: [always|never|change] default: always 28 | on_failure: always # options: [always|never|change] default: always 29 | on_start: never # options: [always|never|change] default: always 30 | 31 | env: 32 | global: 33 | # https://github.com/DefinitelyTyped/tsd#tsdrc 34 | # Token has no scope (read-only access to public information) 35 | - TSD_GITHUB_TOKEN=9b18c72997769f3867ef2ec470e626d39661795d 36 | 37 | cache: 38 | directories: node_modules 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Minko Gechev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Project Status: Unsupported - The project has reached a stable, usable state but the author(s) have ceased all work on it. A new maintainer may be desired.](http://www.repostatus.org/badges/latest/unsupported.svg)](http://www.repostatus.org/#unsupported) 2 | 3 | *Please note that this repository is no longer supported. I have personally switched to [angular-cli](https://github.com/angular/angular-cli). While it is still in beta (as of this writing), the tool has the official support from the Angular team and has the best minds working on it. I would like to thank the angular-cli team for all their efforts.* 4 | 5 | # Introduction 6 | 7 | A seed project for Angular 2 apps using Sass. Derived from [mgechev/angular2-seed](https://github.com/mgechev/angular2-seed). 8 | 9 | It is something similar to the Angular Quick Start but does the entire build with gulp. 10 | 11 | `angular2-seed-sass` provides the following features: 12 | 13 | - Allows you to painlessly update the seed tasks of your already existing project. 14 | - Ready to go, statically typed build system using gulp for working with TypeScript. 15 | - Production and development builds. 16 | - Sample unit tests with Jasmine and Karma including code coverage via [istanbul](https://gotwarlost.github.io/istanbul/). 17 | - End-to-end tests with Protractor. 18 | - Development server with Livereload. 19 | - Following the [best practices for your application’s structure](https://github.com/mgechev/angular2-style-guide). 20 | - Manager of your type definitions using [typings](https://github.com/typings/typings). 21 | - Has autoprefixer and sass-lint support. 22 | - Basic Service Worker, which implements "Cache then network strategy". 23 | - Sass-enabled styling. 24 | 25 | # How to start 26 | 27 | **Note** that this seed project requires node v4.x.x or higher and npm 2.14.7. 28 | 29 | You must have `ts-node` installed as global. If you don't, use: 30 | 31 | ```bash 32 | npm install -g ts-node 33 | ``` 34 | 35 | In order to start using seed: 36 | 37 | ```bash 38 | git clone --depth 1 https://github.com/archfirst/angular2-seed-sass.git 39 | cd angular2-seed-sass 40 | # install the project's dependencies 41 | npm install 42 | # watches your files and uses livereload by default 43 | npm start 44 | # api document for the app 45 | npm run docs 46 | 47 | # dev build 48 | npm run build.dev 49 | # prod build 50 | npm run build.prod 51 | ``` 52 | 53 | _Does not rely on any global dependencies._ 54 | 55 | # Table of Content 56 | 57 | - [Introduction](#introduction) 58 | - [How to start](#how-to-start) 59 | - [Table of Content](#table-of-content) 60 | - [Configuration](#configuration) 61 | - [How to extend?](#how-to-extend) 62 | - [Running tests](#running-tests) 63 | - [Contributing](#contributing) 64 | - [Directory Structure](#directory-structure) 65 | - [Change Log](#change-log) 66 | - [License](#license) 67 | 68 | # Configuration 69 | 70 | Default application server configuration 71 | 72 | ```javascript 73 | var PORT = 5555; 74 | var LIVE_RELOAD_PORT = 4002; 75 | var DOCS_PORT = 4003; 76 | var APP_BASE = '/'; 77 | ``` 78 | 79 | Configure at runtime 80 | 81 | ```bash 82 | npm start -- --port 8080 --reload-port 4000 --base /my-app/ 83 | ``` 84 | 85 | # How to extend? 86 | 87 | Visit the [Wiki page](https://github.com/mgechev/angular2-seed/wiki) of the project. 88 | 89 | # Running tests 90 | 91 | ```bash 92 | npm test 93 | 94 | # Debug - In two different shell windows 95 | npm run build.test.watch # 1st window 96 | npm run karma.start # 2nd window 97 | 98 | # code coverage (istanbul) 99 | # auto-generated at the end of `npm test` 100 | # view coverage report: 101 | npm run serve.coverage 102 | 103 | # e2e (aka. end-to-end, integration) - In three different shell windows 104 | # Make sure you don't have a global instance of Protractor 105 | 106 | # npm run webdriver-update <- You will need to run this the first time 107 | npm run webdriver-start 108 | npm run serve.e2e 109 | npm run e2e 110 | 111 | # e2e live mode - Protractor interactive mode 112 | # Instead of last command above, you can use: 113 | npm run e2e.live 114 | ``` 115 | You can learn more about [Protractor Interactive Mode here](https://github.com/angular/protractor/blob/master/docs/debugging.md#testing-out-protractor-interactively) 116 | 117 | # Contributing 118 | 119 | Please see the [CONTRIBUTING](https://github.com/mgechev/angular2-seed/blob/master/.github/CONTRIBUTING.md) file for guidelines. 120 | 121 | # Directory Structure 122 | 123 | ``` 124 | . 125 | ├── LICENSE 126 | ├── README.md 127 | ├── gulpfile.ts <- configuration of the gulp tasks 128 | ├── karma.conf.js <- configuration of the test runner 129 | ├── package.json <- dependencies of the project 130 | ├── protractor.conf.js <- e2e tests configuration 131 | ├── src <- source code of the application 132 | │   ├── home 133 | │   │   └── components 134 | │   ├── index.html 135 | │   ├── main.ts 136 | │   ├── shared 137 | │   │   └── services 138 | │   │   ├── name-list... 139 | │   │   └── name-list... 140 | │   └── sw.js <- sample service worker 141 | ├── test-main.js <- testing configuration 142 | ├── tools 143 | │   ├── README.md <- build documentation 144 | │   ├── config 145 | │   │   ├── project.config.ts <- configuration of the specific project 146 | │   │   ├── seed.config.... 147 | │   │   └── seed.config.ts <- generic configuration of the seed project 148 | │   ├── config.ts <- exported configuration (merge both seed.config and project.config, project.config overrides seed.config) 149 | │   ├── debug.ts 150 | │   ├── manual_typings 151 | │   │   ├── project <- manual ambient typings for the project 152 | │   │   │   └── sample.pac... 153 | │   │   └── seed <- seed manual ambient typings 154 | │   │   ├── merge-stre.. 155 | │   │   └── slash.d.ts 156 | │   ├── tasks <- gulp tasks 157 | │   │   ├── project <- project specific gulp tasks 158 | │   │   │   └── sample.tas... 159 | │   │   └── seed <- seed generic gulp tasks. They can be overriden by the project specific gulp tasks 160 | │   ├── utils <- build utils 161 | │   │   ├── project <- project specific gulp utils 162 | │   │   │   └── sample_util... 163 | │   │   ├── project.utils.ts 164 | │   │   ├── seed <- seed specific gulp utils 165 | │   │   │   ├── clean.ts 166 | │   │   │   ├── code_change... 167 | │   │   │   ├── server.ts 168 | │   │   │   ├── tasks_tools.ts 169 | │   │   │   ├── template_loc... 170 | │   │   │   ├── tsproject.ts 171 | │   │   │   └── watch.ts 172 | │   │   └── seed.utils.ts 173 | │   └── utils.ts 174 | ├── tsconfig.json <- configuration of the typescript project (ts-node, which runs the tasks defined in gulpfile.ts) 175 | ├── tslint.json <- tslint configuration 176 | ├── typings <- typings directory. Contains all the external typing definitions defined with typings 177 | ├── typings.json 178 | └── appveyor.yml 179 | ``` 180 | 181 | # Change Log 182 | 183 | You can follow the [Angular 2 change log here](https://github.com/angular/angular/blob/master/CHANGELOG.md). 184 | 185 | # License 186 | 187 | MIT 188 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | # AppVeyor file 2 | # http://www.appveyor.com/docs/appveyor-yml 3 | # This file: cloned from https://github.com/gruntjs/grunt/blob/master/appveyor.yml 4 | 5 | # Build version format 6 | version: "{build}" 7 | 8 | # Test against this version of Node.js 9 | environment: 10 | nodejs_version: "4.1.0" 11 | # https://github.com/DefinitelyTyped/tsd#tsdrc 12 | # Token has no scope (read-only access to public information) 13 | TSD_GITHUB_TOKEN: "9b18c72997769f3867ef2ec470e626d39661795d" 14 | 15 | build: off 16 | 17 | clone_depth: 10 18 | 19 | # Fix line endings on Windows 20 | init: 21 | - git config --global core.autocrlf true 22 | 23 | install: 24 | - ps: Install-Product node $env:nodejs_version 25 | - npm install -g npm 26 | - ps: $env:path = $env:appdata + "\npm;" + $env:path 27 | - npm install 28 | 29 | test_script: 30 | # Output useful info for debugging. 31 | - node --version && npm --version 32 | # We test multiple Windows shells because of prior stdout buffering issues 33 | # filed against Grunt. https://github.com/joyent/node/issues/3584 34 | - ps: "npm --version # PowerShell" # Pass comment to PS for easier debugging 35 | - npm test 36 | 37 | 38 | notifications: 39 | - provider: Webhook 40 | url: https://webhooks.gitter.im/e/cfd8ce5ddee6f3a0b0c9 41 | on_build_success: false 42 | on_build_failure: true 43 | on_build_status_changed: true 44 | 45 | -------------------------------------------------------------------------------- /gulpfile.ts: -------------------------------------------------------------------------------- 1 | import * as gulp from 'gulp'; 2 | import * as runSequence from 'run-sequence'; 3 | import {loadTasks} from './tools/utils'; 4 | import {SEED_TASKS_DIR, PROJECT_TASKS_DIR} from './tools/config'; 5 | 6 | loadTasks(SEED_TASKS_DIR); 7 | loadTasks(PROJECT_TASKS_DIR); 8 | 9 | 10 | // -------------- 11 | // Build dev. 12 | gulp.task('build.dev', (done: any) => 13 | runSequence('clean.dev', 14 | 'tslint', 15 | 'sass-lint', 16 | 'build.assets.dev', 17 | 'build.html', 18 | 'build.scss', 19 | 'build.js.dev', 20 | 'build.index.dev', 21 | done)); 22 | 23 | // -------------- 24 | // Build dev watch. 25 | gulp.task('build.dev.watch', (done: any) => 26 | runSequence('build.dev', 27 | 'watch.dev', 28 | done)); 29 | 30 | // -------------- 31 | // Build e2e. 32 | gulp.task('build.e2e', (done: any) => 33 | runSequence('clean.dev', 34 | 'tslint', 35 | 'build.assets.dev', 36 | 'build.html', 37 | 'build.scss', 38 | 'build.js.e2e', 39 | 'build.index.dev', 40 | done)); 41 | 42 | // -------------- 43 | // Build prod. 44 | gulp.task('build.prod', (done: any) => 45 | runSequence('clean.prod', 46 | 'tslint', 47 | 'sass-lint', 48 | 'build.assets.prod', 49 | 'build.html', 50 | 'build.scss', 51 | 'copy.js.prod', 52 | 'build.js.prod', 53 | 'build.bundles', 54 | 'build.bundles.app', 55 | 'build.index.prod', 56 | done)); 57 | 58 | // -------------- 59 | // Build test. 60 | gulp.task('build.test', (done: any) => 61 | runSequence('clean.dev', 62 | 'tslint', 63 | 'build.assets.dev', 64 | 'build.html', 65 | 'build.scss', 66 | 'build.js.test', 67 | 'build.index.dev', 68 | done)); 69 | 70 | // -------------- 71 | // Build test watch. 72 | gulp.task('build.test.watch', (done: any) => 73 | runSequence('build.test', 74 | 'watch.test', 75 | done)); 76 | 77 | // -------------- 78 | // Build tools. 79 | gulp.task('build.tools', (done: any) => 80 | runSequence('clean.tools', 81 | 'build.js.tools', 82 | done)); 83 | 84 | // -------------- 85 | // Docs 86 | gulp.task('docs', (done: any) => 87 | runSequence('build.docs', 88 | 'serve.docs', 89 | done)); 90 | 91 | // -------------- 92 | // Serve dev 93 | gulp.task('serve.dev', (done: any) => 94 | runSequence('build.dev', 95 | 'server.start', 96 | 'watch.dev', 97 | done)); 98 | 99 | // -------------- 100 | // Serve e2e 101 | gulp.task('serve.e2e', (done: any) => 102 | runSequence('build.e2e', 103 | 'server.start', 104 | 'watch.e2e', 105 | done)); 106 | 107 | 108 | // -------------- 109 | // Serve prod 110 | gulp.task('serve.prod', (done: any) => 111 | runSequence('build.prod', 112 | 'server.prod', 113 | done)); 114 | 115 | 116 | // -------------- 117 | // Test. 118 | gulp.task('test', (done: any) => 119 | runSequence('build.test', 120 | 'karma.start', 121 | done)); 122 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Wed Jul 15 2015 09:44:02 GMT+0200 (Romance Daylight Time) 3 | 'use strict'; 4 | 5 | var argv = require('yargs').argv; 6 | 7 | module.exports = function(config) { 8 | config.set({ 9 | 10 | // base path that will be used to resolve all patterns (eg. files, exclude) 11 | basePath: './', 12 | 13 | 14 | // frameworks to use 15 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 16 | frameworks: ['jasmine'], 17 | 18 | 19 | // list of files / patterns to load in the browser 20 | files: [ 21 | 'node_modules/zone.js/dist/zone.js', 22 | 'node_modules/zone.js/dist/long-stack-trace-zone.js', 23 | 'node_modules/zone.js/dist/jasmine-patch.js', 24 | 'node_modules/es6-module-loader/dist/es6-module-loader.js', 25 | 'node_modules/traceur/bin/traceur-runtime.js', // Required by PhantomJS2, otherwise it shouts ReferenceError: Can't find variable: require 26 | 'node_modules/traceur/bin/traceur.js', 27 | 'node_modules/systemjs/dist/system.src.js', 28 | 'node_modules/reflect-metadata/Reflect.js', 29 | // beta.7 IE 11 polyfills from https://github.com/angular/angular/issues/7144 30 | 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js', 31 | 32 | { pattern: 'node_modules/angular2/**/*.js', included: false, watched: false }, 33 | { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 34 | { pattern: 'dist/dev/**/*.js', included: false, watched: true }, 35 | { pattern: 'dist/dev/**/*.html', included: false, watched: true, served: true }, 36 | { pattern: 'dist/dev/**/*.css', included: false, watched: true, served: true }, 37 | { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it 38 | 39 | // suppress annoying 404 warnings for resources, images, etc. 40 | { pattern: 'dist/dev/assets/**/*', watched: false, included: false, served: true }, 41 | 42 | 'test-main.js' 43 | ], 44 | 45 | // must go along with above, suppress annoying 404 warnings. 46 | proxies: { 47 | '/assets/': '/base/dist/dev/assets/' 48 | }, 49 | 50 | // list of files to exclude 51 | exclude: [ 52 | 'node_modules/angular2/**/*spec.js' 53 | ], 54 | 55 | 56 | // preprocess matching files before serving them to the browser 57 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 58 | preprocessors: { 59 | 'dist/**/!(*spec).js': ['coverage'] 60 | }, 61 | 62 | // test results reporter to use 63 | // possible values: 'dots', 'progress' 64 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 65 | reporters: ['mocha', 'coverage'], 66 | 67 | 68 | // web server port 69 | port: 9876, 70 | 71 | 72 | // enable / disable colors in the output (reporters and logs) 73 | colors: true, 74 | 75 | 76 | // level of logging 77 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 78 | logLevel: config.LOG_INFO, 79 | 80 | 81 | // enable / disable watching file and executing tests whenever any file changes 82 | autoWatch: true, 83 | 84 | 85 | // start these browsers 86 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 87 | browsers: [ 88 | 'PhantomJS', 89 | 'Chrome' 90 | ], 91 | 92 | 93 | customLaunchers: { 94 | Chrome_travis_ci: { 95 | base: 'Chrome', 96 | flags: ['--no-sandbox'] 97 | } 98 | }, 99 | 100 | coverageReporter: { 101 | dir: 'coverage/', 102 | reporters: [ 103 | { type: 'text-summary' }, 104 | { type: 'json', subdir: '.', file: 'coverage-final.json' }, 105 | { type: 'html' } 106 | ] 107 | }, 108 | 109 | // Continuous Integration mode 110 | // if true, Karma captures browsers, runs the tests and exits 111 | singleRun: false, 112 | 113 | // Passing command line arguments to tests 114 | client: { 115 | files: argv.files 116 | } 117 | }); 118 | 119 | if (process.env.APPVEYOR) { 120 | config.browsers = ['IE']; 121 | config.singleRun = true; 122 | config.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough 123 | } 124 | 125 | if (process.env.TRAVIS || process.env.CIRCLECI) { 126 | config.browsers = ['Chrome_travis_ci']; 127 | config.singleRun = true; 128 | } 129 | }; 130 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-seed-sass", 3 | "version": "0.0.0", 4 | "description": "Seed for Angular 2 apps using Sass", 5 | "repository": { 6 | "url": "https://github.com/archfirst/angular2-seed-sass" 7 | }, 8 | "scripts": { 9 | "build.dev": "gulp build.dev --color", 10 | "build.dev.watch": "gulp build.dev.watch --color", 11 | "build.docs": "npm run gulp -- build.docs --color", 12 | "build.e2e": "gulp build.e2e --color", 13 | "build.prod": "gulp build.prod --color", 14 | "build.test": "gulp build.test --color", 15 | "build.test.watch": "gulp build.test.watch --color", 16 | "e2e": "protractor", 17 | "e2e.live": "protractor --elementExplorer", 18 | "gulp": "gulp", 19 | "karma": "karma", 20 | "karma.start": "karma start", 21 | "postinstall": "typings install && gulp check.versions && npm prune", 22 | "reinstall": "npm cache clean && npm install", 23 | "serve.coverage": "remap-istanbul -b src/ -i coverage/coverage-final.json -o coverage -t html && npm run gulp -- serve.coverage --color", 24 | "serve.dev": "gulp serve.dev --color", 25 | "serve.docs": "npm run gulp -- build.docs --color && npm run gulp -- serve.docs --color", 26 | "serve.e2e": "gulp serve.e2e --color", 27 | "serve.prod": "gulp serve.prod --color", 28 | "start": "gulp serve.dev --color", 29 | "tasks.list": "gulp --tasks-simple --color", 30 | "test": "gulp test --color", 31 | "webdriver-start": "webdriver-manager start", 32 | "webdriver-update": "webdriver-manager update" 33 | }, 34 | "contributors": [ 35 | "Naresh Bhatia " 36 | ], 37 | "license": "MIT", 38 | "devDependencies": { 39 | "async": "^1.4.2", 40 | "autoprefixer": "^6.3.3", 41 | "browser-sync": "^2.11.2", 42 | "chalk": "^1.1.3", 43 | "codelyzer": "0.0.12", 44 | "colorguard": "^1.1.1", 45 | "connect": "^3.4.1", 46 | "connect-history-api-fallback": "^1.1.0", 47 | "connect-livereload": "^0.5.3", 48 | "cssnano": "^3.5.2", 49 | "doiuse": "^2.3.0", 50 | "event-stream": "^3.3.2", 51 | "express": "~4.13.1", 52 | "express-history-api-fallback": "^2.0.0", 53 | "extend": "^3.0.0", 54 | "gulp": "^3.9.1", 55 | "gulp-cached": "^1.1.0", 56 | "gulp-concat": "^2.6.0", 57 | "gulp-filter": "^4.0.0", 58 | "gulp-inject": "^4.0.0", 59 | "gulp-inline-ng2-template": "^1.1.2", 60 | "gulp-load-plugins": "^1.2.0", 61 | "gulp-plumber": "~1.1.0", 62 | "gulp-postcss": "^6.1.0", 63 | "gulp-sass": "^2.2.0", 64 | "gulp-sass-lint": "^1.1.1", 65 | "gulp-shell": "~0.5.2", 66 | "gulp-sourcemaps": "git+https://github.com/floridoo/gulp-sourcemaps.git#master", 67 | "gulp-template": "^3.1.0", 68 | "gulp-tslint": "^4.3.3", 69 | "gulp-typedoc": "^1.2.1", 70 | "gulp-typescript": "~2.12.1", 71 | "gulp-uglify": "^1.5.3", 72 | "gulp-util": "^3.0.7", 73 | "gulp-watch": "^4.3.5", 74 | "is-ci": "^1.0.8", 75 | "isstream": "^0.1.2", 76 | "jasmine-core": "~2.4.1", 77 | "jasmine-spec-reporter": "^2.4.0", 78 | "karma": "~0.13.22", 79 | "karma-chrome-launcher": "~0.2.2", 80 | "karma-coverage": "^0.5.5", 81 | "karma-ie-launcher": "^0.2.0", 82 | "karma-jasmine": "~0.3.8", 83 | "karma-mocha-reporter": "^2.0.0", 84 | "karma-phantomjs-launcher": "^1.0.0", 85 | "merge-stream": "^1.0.0", 86 | "open": "0.0.5", 87 | "phantomjs-prebuilt": "^2.1.4", 88 | "postcss-reporter": "^1.3.3", 89 | "protractor": "^3.0.0", 90 | "remap-istanbul": "^0.6.1", 91 | "rimraf": "^2.5.2", 92 | "run-sequence": "^1.1.0", 93 | "semver": "^5.1.0", 94 | "serve-static": "^1.10.2", 95 | "slash": "~1.0.0", 96 | "stream-series": "^0.1.1", 97 | "systemjs-builder": "^0.15.14", 98 | "tildify": "^1.2.0", 99 | "tiny-lr": "^0.2.1", 100 | "traceur": "^0.0.91", 101 | "ts-node": "^0.7.1", 102 | "tslint": "^3.7.0-dev.2", 103 | "tslint-stylish": "2.1.0-beta", 104 | "typedoc": "^0.3.12", 105 | "typescript": "~1.8.10", 106 | "typings": "^0.7.12", 107 | "vinyl-buffer": "^1.0.0", 108 | "vinyl-source-stream": "^1.1.0", 109 | "yargs": "^4.2.0" 110 | }, 111 | "dependencies": { 112 | "angular2": "2.0.0-beta.15", 113 | "es6-module-loader": "^0.17.8", 114 | "es6-promise": "^3.1.2", 115 | "es6-shim": "0.35.0", 116 | "reflect-metadata": "0.1.2", 117 | "rxjs": "5.0.0-beta.2", 118 | "systemjs": "~0.19.25", 119 | "zone.js": "^0.6.10" 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | baseUrl: 'http://localhost:5555', 3 | 4 | specs: [ 5 | 'dist/dev/**/*.e2e.js' 6 | ], 7 | exclude: [], 8 | 9 | framework: 'jasmine2', 10 | 11 | allScriptsTimeout: 110000, 12 | 13 | jasmineNodeOpts: { 14 | showTiming: true, 15 | showColors: true, 16 | isVerbose: false, 17 | includeStackTrace: false, 18 | defaultTimeoutInterval: 400000 19 | }, 20 | directConnect: true, 21 | 22 | capabilities: { 23 | 'browserName': 'chrome' 24 | }, 25 | 26 | onPrepare: function() { 27 | var SpecReporter = require('jasmine-spec-reporter'); 28 | // add jasmine spec reporter 29 | jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: true})); 30 | 31 | browser.ignoreSynchronization = false; 32 | }, 33 | 34 | 35 | /** 36 | * Angular 2 configuration 37 | * 38 | * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching 39 | * `rootEl` 40 | * 41 | */ 42 | useAllAngular2AppRoots: true 43 | }; 44 | -------------------------------------------------------------------------------- /src/about/components/about.component.e2e.ts: -------------------------------------------------------------------------------- 1 | describe('About', () => { 2 | 3 | beforeEach( () => { 4 | browser.get('about'); 5 | }); 6 | 7 | it('should have correct feature heading', () => { 8 | expect(element(by.css('sd-app sd-about h2')).getText()) 9 | .toEqual('Features'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/about/components/about.component.html: -------------------------------------------------------------------------------- 1 |

2 | Angular 2 Seed is a starter project that implements best practices in 3 | coding, building and testing Angular 2 apps. 4 |

5 | 6 |

Features

7 | 16 | -------------------------------------------------------------------------------- /src/about/components/about.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: 0 16px; 4 | } 5 | 6 | h2 { 7 | font-size: 20px; 8 | font-weight: 500; 9 | letter-spacing: .005em; 10 | margin-bottom: 0; 11 | margin-top: .83em; 12 | } 13 | -------------------------------------------------------------------------------- /src/about/components/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | TestComponentBuilder, 3 | describe, 4 | expect, 5 | injectAsync, 6 | it 7 | } from 'angular2/testing'; 8 | import {Component} from 'angular2/core'; 9 | import {DOM} from 'angular2/src/platform/dom/dom_adapter'; 10 | import {AboutComponent} from './about.component'; 11 | 12 | export function main() { 13 | describe('About component', () => { 14 | it('should work', 15 | injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { 16 | return tcb.createAsync(TestComponent) 17 | .then((rootTC) => { 18 | let aboutDOMEl = rootTC.debugElement.children[0].nativeElement; 19 | 20 | expect(DOM.querySelectorAll(aboutDOMEl, 'h2')[0].textContent).toEqual('Features'); 21 | }); 22 | })); 23 | }); 24 | } 25 | 26 | @Component({ 27 | selector: 'test-cmp', 28 | directives: [AboutComponent], 29 | template: '' 30 | }) 31 | class TestComponent {} 32 | -------------------------------------------------------------------------------- /src/about/components/about.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'sd-about', 5 | moduleId: module.id, 6 | templateUrl: './about.component.html', 7 | styleUrls: ['./about.component.css'] 8 | }) 9 | export class AboutComponent {} 10 | -------------------------------------------------------------------------------- /src/app/components/app.component.e2e.ts: -------------------------------------------------------------------------------- 1 | describe('App', () => { 2 | 3 | beforeEach( () => { 4 | browser.get(''); 5 | }); 6 | 7 | it('should have a title', () => { 8 | expect(browser.getTitle()).toEqual('My Angular2 App'); 9 | }); 10 | 11 | it('should have