Angular Universal Full Starter

Server-Side Rendering for Angular

Table of Contents

• Live Demo
• Features
• Plans
• Getting Started
  • Installation
  • Development Server
  • Build
• Universal "Gotchas"
• License

Live Demo

angular-universal.ru (Server-Side Rendering)

Features

• Uses Angular 6 as universal web application platform
• Uses Angular Material 6 as UI components
• Uses module-map-ngfactory-loader 6 as server side rendering of lazy routes
• Uses angular/cli 6 as code scaffolder
• Uses webpack 4 as module bundler
• Uses node as server
• Uses express as request handler
• Uses ngx-translate to support internationalization (i18n)
• Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing)
• Uses hmr (Hot Module Replacement) as hot module reloading for Webpack and Angular
• Uses udk (Universal Development Kit) as Webpack extension which improves universal application development

Plans

• Configuration utility
• PWA (Progressive Web Apps)
• WebSocket

Getting Started

Installation

git clone https://github.com/Stivin/angular-universal.git my-project
cd my-project
npm install

Development Server

Server-Side Rendering

Run npm run dev for a universal dev server. Navigate to http://localhost:4000
The universal dev server which enable SSR (build browser and server targets)
The app will automatically hot-reload on server and browser sides if you change any of the source files.

Client-Side Rendering

Run npm run dev:spa for a SPA dev server. Navigate to http://localhost:4200
The SPA dev server which is a webpack dev server (build browser target only).
The app will automatically reload if you change any of the browser source files.

Build

Run npm run build for a build
Run npm run build:prod for a production build

Universal "Gotchas"

When building Universal components in Angular there are a few things to keep in mind.

• window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:
  • If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Client only code.
        ...
    }
    if (isPlatformServer(this.platformId)) {
        // Server only code.
        ...
    }
}

- Try to *limit or* **avoid** using **`setTimeout`**. It will slow down the server-side rendering process. Make sure to remove them in the [`ngOnDestroy`](https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html) method of your Components.
- Also for RxJs timeouts, make sure to _cancel_ their stream on success, for they can slow down rendering as well.

• Don't manipulate the nativeElement directly. Use the Renderer2. We do this to ensure that in any environment we're able to change our view.

constructor(element: ElementRef, renderer: Renderer2) {
    renderer.setStyle(element.nativeElement, 'font-size', 'x-large');
}

• The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
  • Use a cache that's transferred from server to client (TODO: Point to the example)
• Know the difference between attributes and properties in relation to the DOM.
• Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native element the src attribute is reflected as the src property of the element type HTMLImageElement.

License