Skip to content

Features

Here's what library has to offer. Hope it checks all your needs ✅

🌐 Supports server side rendering (SSR), hydration and prerendering / static side generation (SSG)

Supports server side rendering with new and former packages for SSR in Angular

Metadata is set using Angular's built-in services to manipulate DOM. So (server/pre) rendered pages will include meta tags. Also supports hydration.

Actually, a series of E2E tests are in place to ensure support for SSR and hydration for all Angular versions the library claims to be compatible with.

🤝 Compatibility with Angular actively supported versions

Right now being Angular v16, v17 and v18. Update from an Angular version to another when you're ready: this library won't be an issue! Latest version will be compatible with all Angular actively supported versions. There are some E2E tests to ensure that indeed

Older versions may be supported

Latest version of the library may support older Angular versions other than the currently actively supported ones. But it's not guaranteed to do so. Checkout the library's package.json peerDependencies field for exact versions compatibility claims. It may even work for older versions than the ones specified in there, but those haven't been tested.

👥 Supports most of widely used metadata

Like <title>, many standard <meta>s, Open Graph, Twitter Cards and JSON LD structured data. You can see an exhaustive list in comparison page. But if you want more...

🛣️ Integrates with Angular's Router

So you can set the metadata of a route in the route's data and the library will set those metadata values in the page for you.

📜 Types & documentation

Typescript types are provided, so you can discover what metadata can you set and what type of data each metadata accepts. Plus extensive documentation so you can leverage as much as possible of the library's power.

🧩 Fine-grained metadata management

Thanks to the pluggable module based architecture, you can manage popular metadata using built-in library modules, but you can also provide our own. Learn more about that at manage your custom metadata guide. Indeed, you can decide which specific metadata elements you want to use. Learn more in the custom metadata providers selection guide. That will actually help you reduce the already...

📦 Small bundle size

Right now it will take ~6-7KiB of your bundle size when using all features of the library1. Furthermore, bundle size is tracked in every change made to the library. See bundle size page for more details. Anyway, the library is...

🌳 Tree shakeable

Whole library is designed to be tree shakeable. So metadata modules you're not interested in, or features you're not interested in won't end up in your app's bundle size if you don't use them.

🐨 Lazy loading support

To reduce main bundle size, you can also lazy load some metadata. This way, you don't load metadata management code for some metadata elements until you don't need them. For more information, check the late loading modules guide

✨ URL resolution

For metadata values where an absolute URL is required, a base URL can be provided so that you only need to specify relative URLs around and don't repeat the app URL over and over around. Or use the Angular's route path if that one is appropriate. Check out URL resolution guide for more information.

0️⃣ Zero dependencies2

So less pain with dependency management

❤️ Crafted & maintained

Library tries to use Angular & software engineering best practices. Like using Angular's dependency injection (providers in standalone apps or modules otherwise), CI/CD pipelines, linters, formatters, unit & E2E tests... Renovate helps keeping dependencies to build. TL;DR: made by an Angular dev for an Angular dev

  1. After taking some time optimizing bundle size ↩

  2. Well, actually, just one: tslib. But it's because Angular Package Format recommends it ↩