Need help with angular-universal-starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

541 Stars 204 Forks MIT License 481 Commits 13 Opened issues


Angular 9 Universal repo with many features

Services available


Need anything else?

Contributors list

Angular RU Universal Starter Angular-RU Angular-RU Universal

Build Status Build Status

If you like this project please show your support with a GitHub star. Much appreciated!

Repository with Angular CLI and Angular Universal

Translations: - Русский - English - Românesc

Resources: - public chat - - server-side rendering of the master - - client rendering master


  • [x] Angular 11
  • [x]
    document is not defined
    window is not defined
    - here
  • [x] Angular Material2 UI components - individual branch
  • [x] Primeng UI components - individual branch
  • [x] modules import depending on the platform (
  • [x] execution of queries to api on the server
  • [x] work with cookies on the server
  • [x] Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • [x] uses ngx-translate to support internationalization (i18n)
  • [x] uses ORIGIN_URL - for absolute queries
  • [x] @angular/service-worker(
    ng add @angular/pwa --project universal-demo

How to start

  • yarn
    npm install
  • yarn start
    npm run start
    - for client rendering
  • yarn ssr
    npm run ssr
    - for server-side rendering
  • yarn build:universal
    npm run build:universal
    - for assembly in release
  • yarn server
    npm run server
    - to start the server
  • yarn build:prerender
    npm run build:prerender
    - to generate static by
  • for watch with ssr -
    npm run ssr:watch

How to use this repository in your project:

To transfer ssr to your repository, you need the following files: - .angular-cli.json - server.ts - prerender.ts - webpack.config.js - main.server.ts - main.browser.ts - shared/* - forStorage/* - environments/* - app.browser.module.ts - app.server.module.ts


Official example in English: Modules used for universal: - - web for .net core - - TransferHttpCacheModule for http request only server side and sync with TransferHttp for browser - - Express Engine to run the rendering in node, in our application is used. Please note that the current version is not lower than 5.0.0-beta.5 - - Hapi Engine is an alternative engine for rendering. In the example is not used, in principle in the connection scheme does not differ from express-engine - - the module search module for LazyLoading - the thing needed and used. Please note that the current version is not lower than 5.0.0-beta.5

Features (Important)

  • The module for TransferHttp uses
    import {TransferState} from '@angular/platform-browser';
    and it is necessary to implement the request rest api on the server and the absence of the second request a second time. See
    (delay 3c)
this.http.get('').subscribe(result => {
    this.result = result;
  • export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });
    - so that there is no flashing of the page!
  • to work with cookies, it is written

    , which with DI allows you to give different implementations for the server and the browser. See
    for implementations. In
    there is
providers: [
        provide: REQUEST, useValue: (req)
        provide: RESPONSE, useValue: (res)

to work with REQUEST and RESPONSE via DI - this is necessary for implementing UniversalStorage when working with cookies.

  • webpack.config.js
    is written exclusively for building server.ts file in server.js, since angular-cli has bug to work with 3d dependencies. - To solve some problems, use the following code in
    Solving the problems of global variables, including
    document is not defined
    window is not defined
    const domino = require('domino');
    const fs = require('fs');
    const path = require('path');
    const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
    const win = domino.createWindow(template);
    const files = fs.readdirSync(
    // const styleFiles = files.filter(file => file.startsWith('styles'));
    // const hashStyle = styleFiles[0].split('.')[1];
    // const style = fs.readFileSync(path.join(__dirname, '.', 'dist-server',

global['window'] = win; Object.defineProperty(, 'transform', { value: () => { return { enumerable: true, configurable: true }; }, }); global['document'] = win.document; global['CSS'] = null; // global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest; global['Prism'] = null; ```

  global['navigator'] = req['headers']['user-agent'];

this allows you to remove some of the problems when working with


Migrate 5 to 6

  • ng update @angular/cli
  • preboot
    is not working now

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.