Custom metadata providers selection

In previous guides, you have added metadata modules that manage a group of metadata elements. Like in get started setup step, where standard module was added in order to manage several standard (as per HTML spec) metadata elements like <meta> elements.

But those are just groupings of metadata managers according to some subjective criteria. If you want to specify which metadata managers you will actually use, you can too! This can be very useful to remove unused code and hence reduce the bundle size.

For instance, let's say you want to just add the <title> metadata manager from the standard module.

1. Find your metadata manager provider(s)

First, you need to find your metadata manager provider.

In the source code

If the metadata belongs to a built-in module, you can explore the source code to find which metadata manager the group provides.

To do so, go to the src directory of the library's repository. In there, find the directory with the name of the built-in module its providers you want to find. For instance, for the standard module, checkout the standard directory.

In there, enter again the src directory. Now, look for the provider file. For instance, for the standard module, it will be the provide-ngx-meta-standard.ts file.

In there, you'll see which metadata manager the module provides. For instance, for the standard module, you can find something like this:

export const provideNgxMetaStandard = (): Provider[] => [
  provideStandardTitle(),
  provideStandardDescription(),
  // ...
]

The title provider can be easily found by its name: provideStandardTitle. Otherwise, look for it in the API reference. You'll find there that provideStandardTitle manages the Standard.title value which sets the <title> element.

In the API reference

You can also directly check out the API reference variables section. In there, you can look for the module name and the _PROVIDER suffix.

You can find the provideStandardTitle there too.

2. Add it/them

Now that you've found the metadata manager provider you want to use, add it as you would add a built-in module. Remove also the metadata module itself if you will not use other metadata managers from it apart from the ones you specify.

For standalone, module-free appsFor non-standalone, module-based apps

Standalone, module-free apps

This is the default approach for authoring Angular projects generated with Angular CLI v17 and above. It's also the recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration

app.config.ts

// ...
import {provideStandardTitle} from '@davidlj95/ngx-meta/standard'

export const appConfig: ApplicationConfig = {
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaStandard(),
    provideStandardTitle(),
    // ...
  ]
})

Non-standalone, module-based apps

This is the default and traditional approach for authoring Angular projects generated with Angular CLI before v17. It's not the preferred or recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration. You can anyway keep using the module-based equivalent APIs for now if you prefer to do so.

app.module.ts

// ...
import {provideStandardTitle} from '@davidlj95/ngx-meta/standard'

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaStandard(),
    provideStandardTitle(),
  ]
})
export class AppModule {}

You can also (lazy) load it later

You can also load the specific metadata provider later. This means it can be lazy loaded too (if you want). You can do it in a similar way you would with a built-in metadata module. Check out the late loading modules guide for more information. The only change is instead of adding a built-in metadata module, you'll add the specific metadata manager provider.