unlight / angular-webpack-seed

Angular 2 seed project - Webpack 2, TypeScript 2, Angular 4+, Karma / Nightmare 2, Stryker, Gulp 4, ESLint and more

angular-webpack-seed

Angular X single page application starter.

STACK

• Angular 4+
• TypeScript 2
• Webpack 2
• Karma / NightmareJS 2 (Electron)
• Stryker
• Gulp 4
• ESLint with useful plugins

FEATURES

• Fastest typescript compilation (because of transpileOnly)
• Faster unit testing (NightmareJS runs 2 times faster than PhantomJS)
• Hot reload, HMR (Hot Module Replacement)
• AoT (with routes lazy loading)
• Mutation testing
• Conditional linting for source and spec files

QUICK START

git clone https://github.com/unlight/angular-webpack-seed && cd angular-webpack-seed
npm i 
npm run start

HUSKY

• Install: npm i husky
• Uninstall: npm r husky

TASKS

Task	Description
npm run start	Prepare and start local dev server
npm run build:vendors	Prepare npm dependencies for linking
npm run build:libs	Prepare npm dependencies for linking (Scripts)
npm run build:style	Prepare npm dependencies for linking (Design)
npm run server	Local dev server
npm run server:dashboard	Local dev server in dashboard mode
npm run clean	Clean generated folders
npm run eslint	Lint code (single run mode)
npm run gulp eslint:watch	ESLint in watch mode
npm run t	Run unit testing in single run mode
npm run test:all	Sequence of eslint, tschk and coverage tasks
npm run test:w	Run unit testing in watch mode
npm run up	Update all dependencies one by one running tests after each
npm run tschk	Run typescript compile but do not emit files (useful for typechecking)
npm run tschk:w	tschk in watch mode
npm run build	Build application, but not dependencies
npm run build:all	Sequence of build:vendors and build tasks
npm run build:release	Clean rebuild all
npm run coverage	Run test coverage with verbose reporing
npm run coverage:debug	Run coverage task in debug mode
npm run p "t1" "t2"	Run tasks in parallel
npm run stryker	Run mutation tests

DEVELOPMENT TIPS

• Do not disable cache in devtools (network tab): this improves speed significantly, use Ctrl + F5 to clean cache.
• Try to add new external libraries (npm modules) to vendor libs list (entry.libs) and do npm run build:libs

RESOURCES

• Configuration utility for Angular
• An Angular 2 module for mocking components
• Angular X spy object (mock, stub) helper
• Simple, fluent Http mocking for Angular 2
• Simple testing patterns for Angular version 2+
• A curated list of awesome Angular 2 and Angular 4 resources
• Catalog of Angular 2+ Components & Libraries
• The internationalization (i18n) library for Angular 2+
• Open modal window (dialog box) for your angular2 applications using bootstrap3
• Angular toastr ngx-toastr (formerly toastr-ng2)
• Simple popover control for your angular2 applications using bootstrap3. Does not depend of jquery.
• Simple dropdown for your angular2 applications using bootstrap3.
• A set of modules that could be helpful for Angular application development.
• Simple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery.
• Simple tabs control for your angular2 applications using bootstrap3
• Simple pagination control for your angular2 applications using bootstrap3
• Angular directives for displaying validation messages similar to these from AngularJs
• A declarative validation errors module for reactive forms
• Implementation of Angular 1.x $cookies service to Angular 2
• An Angular component for a customizable date and time picker
• Angular 2+ (ngx) ng2 truncate module from Directive, Pipe and Service
• MapleSyrupGroup ngx-flash-messages
• Angular2 + form validators
• Angular X (2+) Async external scripts loading
• Show busy/loading indicators on any promise, or on any Observable's subscription
• Component event delegation
• Limitations with AoT
• AoT Do's and Don'ts
• 5 Rookie Mistakes to Avoid with Angular 2
• A reusable chart library for d3.js
• A Comprehensive Introduction to @ngrx/store
• Class decorator that will automatically unsubscribe from observables and events
• Observable-based virtual scroll implementation in Angular
• Angular Update Guide
• Intrinsic first flexbox grid
• Fast JiT compiler for Angular testing
• A loading spinner for Angular 4
• Singleton service for lazy loaded modules

KNOWN ISSUES

• Cannot use component css tostring with aot https://github.com/UltimateAngular/aot-loader/issues/12 (workaround disable sourcemaps)
• Stryker: webpack cannot load plugins stryker-mutator/stryker-karma-runner#20

TODO

• try https://prepack.io/
• https://github.com/unlight/angular-webpack-seed/issues
• ngrx redux example
  • https://github.com/CodeSequence/ngrx-workshop

DEBUG

inspect node_modules/webpack-dev-server/bin/webpack-dev-server
inspect --debug-exception node_modules/webpack/bin/webpack.js --env.prod --display-modules
inspect --debug-exception node_modules/webpack/bin/webpack.js