Angular Universal Schematics & Utility Helpers - Trilon

Made with :heart: by Trilon.io

Installation

Install & save the library to your package.json:

$ npm i -S @trilon/ng-universal

Modules Available

• NgUniversalModule
  • Helpers / Utilities
    • SEO (Meta & Link) Generator / Helper
    • Structured Data (ld+json) / Rich Snippets
    • SeoService Methods
    • PlatformService
• TransferHttpCacheModule

Universal Node SSR Global Mocks

Note: This is a separate package, as it should only be used for your Node server as it includes Domino

• createGlobalMocks

NgUniversalModule Setup

Now add ApplicationInsightsModule to your Angular Root AppModule:

// Import the Application Insights module and the service provider
import { NgUniversalModule } from '@trilon/ng-universal';

@NgModule({
  imports: [
    // ...
    // Add the Module to your imports
    NgUniversalModule
  ]
})
export class AppModule { }

Angular Universal Helpers

Now that the Library is setup, you have a few great helpers to make Angular Universal a bit simpler and easier to work with!

Angular SEO - Meta & Link Generator

Handling Angular SEO and dynamic Meta & Link generation can be quite the task! Introducing easy-to-use helpers that allow you create a BASE Meta setup for your Application, and easily update the portions needed when visiting different pages/sections of your Application.

Setup a Base SEO Configuration

At the Root of your application utilize the SeoService to initialize a base setup for your Meta/Link/SEO needs. This way you will only have to update fragments of your Meta at different Routes/Components when needed, while this base structure will always be present.

Note: You can also reinitialize this at any part of your Application if you need a fundamentally different Base SEO setup. (ie: /blog/ sections for example, that will always need author|article setup)

import { SeoService } from '@trilon/ng-universal';

@Component({
  selector: 'app-root'
})
export class AppComponent {

  constructor(
    private seo: SeoService
  ) {
    const config: SeoConfig = {
      title: 'Trilon SeoService Demo',
      description: 'Trilon SEO - Description',
      locale: 'en_US',
      url: 'https://trilon.io',
      type: 'website',
      msapplicationTileColor: '#000',
      themeColor: '#fff',
      og: {
        site_name: 'Trilon Consulting',
        image_url: 'https://trilon.io/meta/og-image.png'
      },
      twitter: {
        image_url: 'https://trilon.io/meta/twitter-image.png',
        summary_card: 'summary_large_image',
      },
      keywords: 'trilon, nestjs consulting, nestjs courses, node consulting, angular consulting',
      article: {
        tags: ['seo', 'trilon', 'universal'],
        section: 'trilon'
      },
      link: [
        { rel: 'alternate', type: 'application/rss+xml', title: 'RSS', href: 'https://trilon.io' },
        { rel: 'canonical', href: 'https://trilon.io/blog' }
      ],
    };

    // initialize your base Meta setup
    // (this can be done again at any point if you need to replace it entirely)
    this.seo.initializeBaseMeta(config);
    // ^^^^
  }
}

Now let's say we've traveled to a different Route, and we want that Component to update a few important pieces of the SEO, without having to re-do everything.

export class TrilonBlogComponent {
  constructor(private seo: SeoService) {
    this.seo.update({
      title: 'Blog - Trilon.io',
      description: 'Learn more about NestJS, Angular and Fullstack Development at the Trilon Blog!'
      url: 'https://trilon.io/blog'
    })
  }
}

Angular Structured Data / ld+json / Rich Snippets

export class TrilonBlogComponent {
  constructor(private seo: SeoService) {
    this.seo.updateStructuredData(
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "url": "http://www.trilon.io",
        "name": "Fullstack Consulting",
        "contactPoint": {
          "@type": "ContactPoint",
          "website": "https://trilon.io",
          "contactType": "Consulting"
        }
      }
    )
  }
}

SeoService Methods:

• updateStructuredData(json)
  • Set or Update your ld+json script structured data / rich snippets
• initializeBaseMeta(SeoConfig)
  • Set your initial Meta setup for your entire application
• SeoService.update(SeoConfig)
  • Update (even partially) the SEO/Meta

This will update just the necessary portions added above, while leaving everything else intact!

PlatformService

Typically in Angular Universal Applications you have sections of code that can only run in certain platforms (browser or server), with PlatformService you can simply add it in the constructor of any Component/Service within your application, and run code specific to that platform - without causing Errors in the other platform.

import { PlatformService } from '@trilon/ng-universal';

@Component({ /* ... */ })
export SomeComponent {
  constructor(private platformService: PlatformService) {
    if (platformService.isBrowser) {
      // Run browser-specific code that would cause errors in the Server/Node platform!
      // $('body').addClass('');
    }

    if (platformService.isServer) {
      // Run Server/Node-specific code
    }
  }
}

IsBrowser | IsService Directives

Equally important with Angular Universal is displaying only Components/UI that are neccessary for the given platform. To improve performance, or to avoid Components all-together we can use *isBrowser or *isServer Directives to display/hide specific things given a platform.

Take as an example a Twitter Feed section that's connected to 3rd party Components/Libraries and API-calls. We don't need Universal to display these as there is no SEO benefit, and most likely they will slow down our Render time. In this case it's most beneficial to simply avoid it entirely during server-side rendering, and have only the Browser display and render this Component!

<ng-container *isBrowser>
  <app-twitter-feed></app-twitter-feed>
</ng-container>

More Documentation & Utilies Coming soon...

TransferHttpCacheModule Setup

In order to prevent UI flickers with Angular Universal we want to make sure we're caching Http responses and re-using them during the client-side render. This Module helps not only Cache GET requests, but POST requests as well.

// Import the Application Insights module and the service provider
import { TransferHttpCacheModule } from '@trilon/ng-universal';

// Filter out which POST requests you -want- to Cache
export function cachePostFilter(req, key) {
  // If intercepted request URL contains any part of the below list, cache it
  const cacheList = ['/posts', '/products'];
  
  const cacheRequest = cacheList.filter(p => {
    // Test against current req.url that's intercepted
    if (req.url.includes(p)) {
      return true;
    }
    return false;
  }).length >= 0;

  return cacheRequest;
}

@NgModule({
  imports: [
    // ...
    // Add the Module to your imports
    TransferHttpCacheModule.forRoot({
      cachePOSTFilter: cachePostFilter
    })
  ]
})
export class AppModule { }

createGlobalMocks

Note: Breaking changes: Renamed to createGlobalMocks. In @trilon/ng-universal v2+ there was a breaking change, and this method has now been introduced as its own npm package to avoid domino being bundled in client angular bundles.

Installation:

$ npm i --S @trilon/universal-ssr-mocks

Mock Window & Document in Node to prevent "window undefined" Node errors. Remember these globals don't exist in the Node platform, so it's important to Mock them and fill them with your app skeleton html (utilizing Domino), otherwise 3rd party libraries (and even your own code), can cause errors during a server-side render.

In your server.ts file, grab your template (html) and pass it into the createGlobalMocks utility to populate your Node globals for window|document.

import { createGlobalMocks } from '@trilon/universal-ssr-mocks';

// Make sure you grab wherever your index.html is, we want to use that html as a -base- for Domino
const template = readFileSync(join(DIST_FOLDER, 'Your_CLI_Project_Name', 'index.html')).toString();
createGlobalMocks(template);

You can additionally pass in more globals for window or document incase you need to patch/mock other things such as $ from jQuery / etc.

createGlobalMocks(template, /* additional window mocks*/ {
  $: {},
  someOtherWindowProp: {}
})

License

Copyright (c) 2019 Trilon

Trilon Consulting

JavaScript, Node, NestJS Consulting from Open-Source Fanatics and Key Contributors!

Check out Trilon.io for more info!

Contact us at [email protected], and let's talk about your projects needs.

Made with :heart: by Trilon.io