Angular Universal - aakash14goplani/FullStack GitHub Wiki

Topics Covered

Introduction

  • Angular Universal allows you to pre render your angular app on the server.

  • It is not a server-side framework like Express or anything like that. You won't use it to write server side code but it allows you to on the fly pre render pages your users visit so that when the users load the page they get that finished Page served back and initial rendering doesn't need to happen in the browser and only subsequent actions by the user are then handled as always in the browser only.

  • If you view-source any angular project, you see minimal HTML, basically <app-root></app-root> element along with bunch of script imports. So the angular framework and the code we wrote compiled optimized and bundled together and <app-root></app-root> simply marks the place where our code in the end will start rendering the angular app that we finally see on the screen is simply the case because the angular apps all these scripts do their job and they change the page we're seeing after it has been loaded by the browser.

  • It has happened so fast that we don't see internal details but this is what's happening now. This approach generally is fine but in some situations it might have downsides like:

    • users are on slower networks - in such cases the javascript download might take a time and until the javascript code has been downloaded your users will see nothing.
    • SEO optimization - the crawler of that search engine looks at different Web sites to index them and the search engine only sees what's initially downloaded by the server. It doesn't necessarily wait for all your scripts to be done with rendering what the user sees. So a search engine might not see what the user sees the end. It will only see initial state of app i.e. minimal HTML with <app-root></app-root>, this is not so great for getting a good index score.

  • So when you first visit the page it would be pre rendered on the server. So if we get a real HTML Page served back that Page will still contain all the script imports because it will be converted into a annular app after it has been loaded so that subsequent clicks are again handled in the browser only to be fast and reactive. But that first load is handled on the server that fixes the search engine problem and also fixes the issue of slower connections and angular universal helps us with that.

Installing Angular Universal

  • Run command ng add @nguniversal/express-engine --clientProject <project-name>

    • Here <project-name> is the project name as spelled in angular.json file

  • Since Angular Universal will also load on server, you need to ensure that your code-base does not use any browser specific library like localStorage(). If your code-base does use them you need to follow below steps:

    • use isPlatformBrowser() method to check if the executing environment is browser
    • this method needs one id which is platform_id that can be extracted from Angular @Inject(PLATFORM_ID) 
    import { Inject, PLATFORM_ID } from '@angular/core';
...
constructor(
   private store: Store<fromApp.AppState>,
   @Inject(PLATFORM_ID) private platformId
) {}

ngOnInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.store.dispatch(new AuthActions.AutoLogin());
  }
}

Deploying Application

  • You can't deploy an Angular Universal app to a static host i.e. Firebase Hosting, AWS S3, GitHub Pages etc will NOT work.

  • The reason for this is, that you're using Node.js to pre-render pages on the server and those Hosts don't support Node.js. Hence you need a host that does - for example AWS Elastic Beanstalk or Heroku.

  • To these hosts, you need to upload your dist/ folder along with the package.json file. On the web server, you then have to ensure that npm install is executed, followed by npm serve:ssr.

  • That's it - your app is now up and running on a web server! Example from Udemy

⚠️ **GitHub.com Fallback** ⚠️