angular-seed-advanced

An advanced Angular2 seed project with support for ngrx/store, ngrx/effects, ng2-translate, angulartics2, lodash, NativeScript (*native* mobile), Electron (Mac, Windows and Linux desktop) and more.

Module License: MIT

Added by: Sam Deering

GitHub

Repository

nathanwalker/angular-seed-advanced

Stats

Stars: 1923

Watchers: 1923

Forks: 429

Module Description

Angular 2 Seed AdvancedAngular 2 Seed Advanced Integrations

Angular 2 Style Guide Build Status MIT license Dependency Status devDependency Status Stack Share Stories in Progress

Considering Angular 2 for a large project? Do you need i18n support? Enhanced testing support? Oh and building for multiple platforms too? Web, native Mobile (Android/iOS), and even Desktop (Mac, Windows and Linux)?

This is an advanced seed project for Angular 2 apps based on Minko Gechev's angular-seed that expands on all of its great features to include core support for:

Integration with:

| Multiple Platforms | | :---: | | The zen of multiple platforms. Chrome, Android and iPhone all running the same code. |

| Desktop | | :---: | | Programming Nirvana. Mac and Windows desktop both running the same code. |

Table of Contents

Enhanced development workflow

  • Decorators for components which reduce boilerplate for common component setups
  • Shared code can be found in frameworks:
    • core: foundation layer (decorators and low-level services)
    • analytics: analytics provided by Segment
      • Only reports data in production build
    • i18n: internationalization features
    • electron: Electron specific code
    • sample: Just a sample module providing some components and services
    • test: test specific code providing conveniences to make testing your code easier and faster

Enhanced testing support options

  • mocks for various services
  • configurable provider blocks for easy test setup of common application providers
    • tired of setting up similar providers over and over again for different tests?
    • configure a reusable test provider which can be configured on a case-by-base basis
    • see example here
  • helpers for end-to-end (e2e, integration) tests
  • convenient shorthand to reduce test setup boilerplate and enhance speed of writing tests
    • are your test cases buried by multiple import lines requiring you to scroll just to get to the substance of the test?
    • removes noise allowing you to better focus on the substance of the test
    • provides full intellisense support
    • allows your team to add unique shorthands for various testing scenarios specific to your application needs
    • plays nice with tslint options like "no-unused-variable": true as the api hangs off a plain Object instead of globals
      • what's the value of that you ask? have you ever isolated a test with iit or ddescribe but didn't import those or vice versa, used iit leaving an unused it now in your tests? yeah, tslint will be all over you :/
      • avoids unused variable warnings altogether in tests since you are always using a valid key from the shorthand Object
    • see example here

Advice: If your project is intended to target a single platform (i.e, web only), then angular-seed is likely more than suitable for your needs. However if your project goals are to target multiple platforms (web, native mobile and native desktop), with powerful out of the box library support and highly configurable/flexible testing options, then you might want to keep reading.

Additionally, this seed is intended to push a couple boundaries so if you see dependencies that are bleeding edge, this is intentional.

Prerequisites

  • node v5.x.x or higher and npm 3 or higher.

  • To run the NativeScript app:

npm install -g nativescript
npm install -g typescript

Usage

git clone --depth 1 https://github.com/NathanWalker/angular-seed-advanced.git
cd angular-seed-advanced

# install the project's dependencies
npm install
# watches your files and uses livereload by default
npm start
# api document for the app
npm run serve.docs

# to start deving with livereload site and coverage as well as continuous testing
npm run start.deving

# dev build
npm run build.dev
# prod build
npm run build.prod
# prod build with AoT compilation
npm run build.prod.exp

Special Note About AoT

When using npm run build.prod.exp for AoT builds, please consider the following:

Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

import { Component } from [email protected]/core';
import { BaseComponent } from '../frameworks/core/index';

// @BaseComponent({   // just comment this out and use Component from 'angular/core'
@Component({
  // etc.

After doing the above, running AoT build via npm run build.prod.exp will succeed. :)

BaseComponent custom component decorator does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the BaseComponent. Again this temporary inconvenience may be unnecessary in the future.

NativeScript App

Setup

npm install -g nativescript 

Dev Workflow

You can make changes to files in src/client or nativescript folders. A symbolic link exists between the web src/client and the nativescript folder so changes in either location are mirrored because they are the same directory inside.

Create .tns.html and .tns.css NativeScript view files for every web component view file you have. You will see an example of the app.component.html as a NativeScript view file here.

Run

iOS:                      npm run start.ios
iOS (livesync emulator):  npm run start.livesync.ios
iOS (livesync device):    npm run start.livesync.ios.device

// or...

Android:                      npm run start.android
Android (livesync emulator):  npm run start.livesync.android
Android (livesync device):    npm run start.livesync.android.device

OR...

Building with Webpack for release builds

You can greatly reduce the final size of your NativeScript app by the following:

cd nativescript
npm i nativescript-dev-webpack --save-dev

Then you will need to modify your components to not use moduleId: module.id and change templateUrl to true relative app, for example:

before:

@BaseComponent({
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})

after:

@BaseComponent({
  // moduleId: module.id,
  selector: 'sd-home',
  templateUrl: './app/components/home/home.component.html',
  styleUrls: ['./app/components/home/home.component.css']
})

Then to build:

Ensure you are in the nativescript directory when running these commands.

  • iOS: WEBPACK_OPTS="--display-error-details" tns build ios --bundle
  • Android: WEBPACK_OPTS="--display-error-details" tns build android --bundle

Notice your final build will be drastically smaller. In some cases 120 MB -> ~28 MB.

Module stats last updated: 2017-08-12 15:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!