Made with ❤️ by Trilon.io
Install & save the library to your package.json:
$ npm i -S @trilon/ng-universal- NgUniversalModule
- Helpers / Utilities
- SEO (Meta & Link) Generator / Helper
- Structured Data (ld+json) / Rich Snippets
- SeoService Methods
- PlatformService
- Helpers / Utilities
- TransferHttpCacheModule
Note: This is a separate package, as it should only be used for your Node server as it includes Domino
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 { }Now that the Library is setup, you have a few great helpers to make Angular Universal a bit simpler and easier to work with!
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.
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'
})
}
}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"
}
}
)
}
}updateStructuredData(json)- Set or Update your
ld+jsonscript structured data / rich snippets
- Set or Update your
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!
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
}
}
}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...
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 { }Note: Breaking changes: Renamed to
createGlobalMocks. In@trilon/ng-universalv2+ 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.
$ npm i --S @trilon/universal-ssr-mocksMock 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: {}
})Copyright (c) 2019 Trilon
Check out Trilon.io for more info!
Contact us at [email protected], and let's talk about your projects needs.