{"id":21614491,"url":"https://github.com/trilonio/ng-universal","last_synced_at":"2025-06-10T15:05:46.380Z","repository":{"id":34645359,"uuid":"177634299","full_name":"TrilonIO/ng-universal","owner":"TrilonIO","description":"Angular Universal \u0026 SEO Utilities/Helpers - Brought to you by Trilon","archived":false,"fork":false,"pushed_at":"2023-01-07T04:41:22.000Z","size":5036,"stargazers_count":42,"open_issues_count":29,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T10:41:24.183Z","etag":null,"topics":["angular","angular-universal","ssr","trilon"],"latest_commit_sha":null,"homepage":"https://trilon.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TrilonIO.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-25T17:35:06.000Z","updated_at":"2023-02-17T10:07:10.000Z","dependencies_parsed_at":"2023-01-15T08:18:38.432Z","dependency_job_id":null,"html_url":"https://github.com/TrilonIO/ng-universal","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fng-universal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fng-universal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fng-universal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fng-universal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrilonIO","download_url":"https://codeload.github.com/TrilonIO/ng-universal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358548,"owners_count":21090401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-universal","ssr","trilon"],"created_at":"2024-11-24T22:08:13.466Z","updated_at":"2025-04-11T06:51:57.358Z","avatar_url":"https://github.com/TrilonIO.png","language":"TypeScript","readme":"# Angular Universal Schematics \u0026 Utility Helpers - Trilon\n\n[![npm](https://img.shields.io/npm/v/@trilon/ng-universal.svg?label=npm%20version\u0026color=5b1096\u0026style=for-the-badge)](https://www.npmjs.com/@trilon/ng-universal)\n[![Minzipped Size](https://img.shields.io/bundlephobia/minzip/@trilon/ng-universal?color=b31ae7\u0026style=for-the-badge)](https://bundlephobia.com/result?p=@trilon/ng-universal@2.0.1)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=e51384)](/LICENSE) \n\n\n\u003c!--[![NPM Downloads](https://img.shields.io/npm/dt/@trilon/ng-universal.svg?color=b31ae7\u0026style=for-the-badge)](https://www.npmjs.com/@trilon/ng-universal)--\u003e\n\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trilon.io\" target=\"_blank\"\u003e\n        \u003cimg width=\"500\" height=\"auto\" src=\"https://trilon.io/trilon-logo-clear.png\" alt=\"Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003ch3 align=\"center\"\u003e Made with :heart: by \u003ca href=\"https://trilon.io\"\u003eTrilon.io\u003c/a\u003e\u003c/h3\u003e\n\n---\n\n## Installation\n\nInstall \u0026 save the library to your package.json:\n\n```bash\n$ npm i -S @trilon/ng-universal\n```\n\n## Modules Available\n\n- [NgUniversalModule](#nguniversalmodule-setup)\n  - [Helpers / Utilities](#angular-universal-helpers)\n    - SEO (Meta \u0026 Link) Generator / Helper\n    - Structured Data (ld+json) / Rich Snippets\n    - SeoService Methods\n    - PlatformService \n- [TransferHttpCacheModule](#transferhttpcachemodule-setup)\n\n## Universal Node SSR Global Mocks\n\n\u003e Note: This is a separate package, as it should only be used for your Node server as it includes Domino\n\n- [createGlobalMocks](#createglobalmocks)\n\n---\n\n## NgUniversalModule Setup\n\nNow add ApplicationInsightsModule to your Angular Root `AppModule`:\n\n```typescript\n// Import the Application Insights module and the service provider\nimport { NgUniversalModule } from '@trilon/ng-universal';\n\n@NgModule({\n  imports: [\n    // ...\n    // Add the Module to your imports\n    NgUniversalModule\n  ]\n})\nexport class AppModule { }\n```\n\n# Angular Universal Helpers \n\nNow that the Library is setup, you have a few great helpers to make Angular Universal a bit simpler and easier to work with!\n\n## Angular SEO - Meta \u0026 Link Generator\n\nHandling Angular SEO and dynamic Meta \u0026 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.\n\n#### Setup a Base SEO Configuration\n\nAt 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.\n\n\u003e 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)\n\n```ts\nimport { SeoService } from '@trilon/ng-universal';\n\n@Component({\n  selector: 'app-root'\n})\nexport class AppComponent {\n\n  constructor(\n    private seo: SeoService\n  ) {\n    const config: SeoConfig = {\n      title: 'Trilon SeoService Demo',\n      description: 'Trilon SEO - Description',\n      locale: 'en_US',\n      url: 'https://trilon.io',\n      type: 'website',\n      msapplicationTileColor: '#000',\n      themeColor: '#fff',\n      og: {\n        site_name: 'Trilon Consulting',\n        image_url: 'https://trilon.io/meta/og-image.png'\n      },\n      twitter: {\n        image_url: 'https://trilon.io/meta/twitter-image.png',\n        summary_card: 'summary_large_image',\n      },\n      keywords: 'trilon, nestjs consulting, nestjs courses, node consulting, angular consulting',\n      article: {\n        tags: ['seo', 'trilon', 'universal'],\n        section: 'trilon'\n      },\n      link: [\n        { rel: 'alternate', type: 'application/rss+xml', title: 'RSS', href: 'https://trilon.io' },\n        { rel: 'canonical', href: 'https://trilon.io/blog' }\n      ],\n    };\n\n    // initialize your base Meta setup\n    // (this can be done again at any point if you need to replace it entirely)\n    this.seo.initializeBaseMeta(config);\n    // ^^^^\n  }\n}\n```\n\nNow 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_.\n\n```ts\nexport class TrilonBlogComponent {\n  constructor(private seo: SeoService) {\n    this.seo.update({\n      title: 'Blog - Trilon.io',\n      description: 'Learn more about NestJS, Angular and Fullstack Development at the Trilon Blog!'\n      url: 'https://trilon.io/blog'\n    })\n  }\n}\n```\n\n## Angular Structured Data / ld+json / Rich Snippets\n\n```ts\nexport class TrilonBlogComponent {\n  constructor(private seo: SeoService) {\n    this.seo.updateStructuredData(\n      {\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"Organization\",\n        \"url\": \"http://www.trilon.io\",\n        \"name\": \"Fullstack Consulting\",\n        \"contactPoint\": {\n          \"@type\": \"ContactPoint\",\n          \"website\": \"https://trilon.io\",\n          \"contactType\": \"Consulting\"\n        }\n      }\n    )\n  }\n}\n```\n\n\n#### SeoService Methods:\n\n- `updateStructuredData(json)`\n  - Set or Update your `ld+json` script structured data / rich snippets\n- `initializeBaseMeta(SeoConfig)`\n  - Set your initial Meta setup for your entire application\n- `SeoService.update(SeoConfig)`\n  - Update (even partially) the SEO/Meta\n\nThis will update just the necessary portions added above, while leaving everything else intact!\n\n---\n\n## PlatformService\n\nTypically 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.\n\n```ts\nimport { PlatformService } from '@trilon/ng-universal';\n\n@Component({ /* ... */ })\nexport SomeComponent {\n  constructor(private platformService: PlatformService) {\n    if (platformService.isBrowser) {\n      // Run browser-specific code that would cause errors in the Server/Node platform!\n      // $('body').addClass('');\n    }\n\n    if (platformService.isServer) {\n      // Run Server/Node-specific code\n    }\n  }\n}\n\n```\n\n## IsBrowser | IsService Directives\n\nEqually 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.\n\nTake 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!\n\n```html\n\u003cng-container *isBrowser\u003e\n  \u003capp-twitter-feed\u003e\u003c/app-twitter-feed\u003e\n\u003c/ng-container\u003e\n```\n\n\nMore Documentation \u0026 Utilies Coming soon...\n\n---\n\n# TransferHttpCacheModule Setup\n\nIn 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.\n\n```ts\n// Import the Application Insights module and the service provider\nimport { TransferHttpCacheModule } from '@trilon/ng-universal';\n\n// Filter out which POST requests you -want- to Cache\nexport function cachePostFilter(req, key) {\n  // If intercepted request URL contains any part of the below list, cache it\n  const cacheList = ['/posts', '/products'];\n  \n  const cacheRequest = cacheList.filter(p =\u003e {\n    // Test against current req.url that's intercepted\n    if (req.url.includes(p)) {\n      return true;\n    }\n    return false;\n  }).length \u003e= 0;\n\n  return cacheRequest;\n}\n\n@NgModule({\n  imports: [\n    // ...\n    // Add the Module to your imports\n    TransferHttpCacheModule.forRoot({\n      cachePOSTFilter: cachePostFilter\n    })\n  ]\n})\nexport class AppModule { }\n```\n\n---\n\n## createGlobalMocks\n\n\u003e 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.\n\n#### Installation:\n\n```bash\n$ npm i --S @trilon/universal-ssr-mocks\n```\n\nMock Window \u0026 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.\n\nIn your `server.ts` file, grab your `template` (html) and pass it into the createGlobalMocks utility to populate your Node globals for window|document.\n\n```ts\nimport { createGlobalMocks } from '@trilon/universal-ssr-mocks';\n\n// Make sure you grab wherever your index.html is, we want to use that html as a -base- for Domino\nconst template = readFileSync(join(DIST_FOLDER, 'Your_CLI_Project_Name', 'index.html')).toString();\ncreateGlobalMocks(template);\n```\n\nYou can additionally pass in more globals for window or document incase you need to patch/mock other things such as `$` from jQuery / etc.\n\n```ts\ncreateGlobalMocks(template, /* additional window mocks*/ {\n  $: {},\n  someOtherWindowProp: {}\n})\n```\n\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=e51384)](/LICENSE) \n\nCopyright (c) 2019 [Trilon](https://trilon.io)\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/Trilon_io.svg?style=social)](https://twitter.com/Trilon_io)\n\n----\n\n# Trilon Consulting \n\n## JavaScript, Node, NestJS Consulting from Open-Source Fanatics and Key Contributors!\n\nCheck out **[Trilon.io](https://Trilon.io)** for more info! \n\nContact us at \u003chello@trilon.io\u003e, and let's talk about your projects needs.\n\n\u003cbr\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trilon.io\" target=\"_blank\"\u003e\n        \u003cimg width=\"500\" height=\"auto\" src=\"https://trilon.io/trilon-logo-clear.png\" alt=\"Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e Made with :heart: by \u003ca href=\"https://trilon.io\"\u003eTrilon.io\u003c/a\u003e\u003c/h3\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrilonio%2Fng-universal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrilonio%2Fng-universal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrilonio%2Fng-universal/lists"}