Skip to content

Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer

Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time


CircleCI coverage Code Quality: JavaScript Total Alerts Greenkeeper badge Join the chat at

Please support this project by simply putting a GitHub star. Share this library with friends on twitter and everywhere else you can.

universal is a seed project for Angular Universal apps following the common patterns and best practices in file and application organization, providing the following features:

  • Providing a seed project using the Angular framework.
  • NEW: Extending workspace/monorepo capabilities by Nx!
  • Includes ngrx-powered CRUD feature tutorial.
  • Compiling bundles for both browser (SPA) and server (Angular Universal) platforms.
  • Rebased on Angular CLI to focus on features and development productivity, not on build tools.
  • Customizable webpack configuration via @angular-builders.
  • Using the modern UI components of Angular Material.
  • Dynamic responsive layouts via flex-layout.
  • Built-in Hot Module Replacement to save valuable development time.
  • Development, staging and production modes.
  • Performing AoT compilation for rapid page loads on staging/production builds.
  • Tree-shaking and minifying the production builds using Angular Devkit.
  • Cross-browser SCSS with autoprefixer and browserslist.
  • stylelint-config-standard as configuration preset for stylelint and custom rules to standardize stylesheets.
  • Transferring server responses on client bootstrap to prevent app flickering with native TransferState`.
  • Deferring initialization of modules via Lazy loading.
  • Uses ngrx/store for state management.
  • NEW Uses ngrx/entity state adapter to manipulate and query entity collections.
  • NEW Uses ngrx/effects side effect model to to model event sources as actions.
  • NEW Uses unionize for boilerplate-free functional sum types.
  • Uses ngx-config for configuration management.
  • Uses ngx-auth for basic JWT-based authentication (w/Universal support).
  • Uses ngx-cache for application-wide caching.
  • Uses ngx-translate for i18n support.
  • Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • Uses ngx-perfect-scrollbar for scrollbars.
  • Vendor-agnostic analytics via angulartics2.
  • Unit tests with Jest, including code coverage.
  • Seamless integration with CircleCI continuous integration and delivery platform.
  • angular-tslint-rules as configuration preset for TSLint and codelyzer.

You can view the live app at

Table of contents:

Getting started


You can install universal by simply forking the repo:

# clone the repo
$ git clone [your-project-name]
$ cd [your-project-name]

Setting up upstream repository

Once you have cloned the repo, you can follow these steps to allow sync changes made in this repo with your fork:

# set up `origin`
$ git remote set-url origin [your-fork-repo]

# set up `upstream` to sync future changes
$ git remote add upstream

# verify the upstream repo specified for your fork
$ git remote -v
origin[your-fork-repo].git (fetch)
origin[your-fork-repo].git (push)
upstream (fetch)
upstream (push)

# initial push for the fork
$ git push

Now, you can create a new directory (ex: src/app/shared) to build your codebase out, while benefiting from the client framework located at the src/app/framework directory.

In order to merge the latest upstream changes, simply follow:

# fetch the latest upstream
$ git fetch upstream

# merge the upstream changes
$ git merge upstream/master

then handle any conflicts, and go on with building your app.

Development and builds

Below are the scripts to dev, build, and test this seed project:

Install dependencies

# use `yarn` to install the deps
$ yarn

Development server

# dev server
$ ng serve

# dev server (HMR-enabled)
$ ng serve --c hmr

# dev server (AoT compilation)
$ ng serve --prod

# dev server (SSR)
$ yarn start:ssr

# dev server (SSR & AoT compilation)
$ yarn start:ssr:prod

And then,

  • Navigate to http://localhost:4200/ for the SPA (browser) build.
  • Navigate to http://localhost:4000/ for the SSR (universal) build.

The app will automatically re-compile if you change any of the source files.


# development build
$ ng build

# production build
$ ng build --prod

# development build (SSR)
$ yarn build:ssr

# production build (SSR)
$ yarn build:ssr:prod

The build artifacts will be stored in the dist/ directory.

Running tests

# run unit tests
$ ng test


If you want to file a bug, contribute some code, or improve documentation, please read up on the following contribution guidelines:

Thanks to

  • JetBrains, for their support to this open source project with free WebStorm licenses.


The MIT License (MIT)

Copyright (c) 2018 Burak Tasci


Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer





No packages published