Skip to content

Manual setup

If you don't want to use the ng add schematics to install and set up the library as described in get started, you can install and set up the library manually.

1. Install the library

Using your package manager's install command. For instance, with npm:

npm install @davidlj95/ngx-meta

2. Add library's providers

Now, let's add some providers to set the library up.

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

Open your app.config.ts file. Add at least the core provider to the providers section.

If you want to set metadata in each route's data using Angular's Router, add the library's routing module too.

In order to set some standard <meta>s, let's add the standard module provider.

app.config.ts
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

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

Check out the example standalone app's app.config.ts file for a full config file example

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.

Open your app.module.ts file. Add at least the library's core module to the providers section.

If you want to set metadata in each route's data using Angular's Router, add the library's routing module too.

In order to set some standard <meta>s, let's add the standard module.

app.module.ts
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

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

Check out the example module-based app's app.module.ts file for a full app module file example

Lazy load them if you want!

You can load metadata modules (like Open Graph module) later. They can be lazy loaded too actually. So if you don't need all metadata modules to be available in all your app, you can reduce the main bundle size by loading some later. Check out the late loading modules guide for more information

3. Enjoy

You can use the library as usual now. Take a look at the steps after the setup in the get started docs