Docs›Render›Getting Started›Installation

Installation

Detailed setup guide for @ngaf/render in your Angular application.

Requirements

1
Angular 20+

@ngaf/render uses Angular Signals, the input() function, and the NgComponentOutlet directive. Angular 20 or later is required.

2
Node.js 18+

Required for the build toolchain and package installation.

Install the Package

npm install @ngaf/render @json-render/core

Peer Dependencies

The library requires the following peer dependencies:

PackageVersion
@angular/core^20.0.0 or ^21.0.0
@angular/common^20.0.0 or ^21.0.0
@json-render/core^0.16.0
Angular packages

@angular/core and @angular/common are already part of any Angular 20+ project. You only need to install @json-render/core as an additional dependency if your package manager does not install peer dependencies automatically.

Configure the Provider

Add provideRender() to your application configuration. This sets global defaults for all <render-spec> instances in your application.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRender, defineAngularRegistry } from '@ngaf/render';
import { TextComponent } from './components/text.component';
import { CardComponent } from './components/card.component';
 
const registry = defineAngularRegistry({
  Text: TextComponent,
  Card: CardComponent,
});
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRender({ registry }),
  ],
};
provideRender() is optional

provideRender() is a convenience for setting global defaults. You can skip it entirely and pass registry, store, functions, and handlers as inputs directly to <render-spec>. Inputs always take precedence over provider config.

Minimal App Setup

Here is a complete minimal application setup:

import { ApplicationConfig } from '@angular/core';
import { provideRender, defineAngularRegistry } from '@ngaf/render';
import { TextComponent } from './text.component';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRender({
      registry: defineAngularRegistry({
        Text: TextComponent,
      }),
    }),
  ],
};

Verify Installation

After setting up, run your application and verify the rendered output:

ng serve

If you see your component rendered with the expected props, the installation is complete.

Troubleshooting

Common issues

"NullInjectorError: No provider for InjectionToken RENDER_CONFIG" -- This means you are trying to inject RENDER_CONFIG but did not call provideRender(). Either add provideRender() to your appConfig providers, or pass the registry and store directly as inputs to <render-spec>. The RENDER_CONFIG token is optional -- the component works without it.

Component not rendering -- Verify that the element type in your spec matches a key in your registry. For example, if your spec uses type: 'Text', your registry must have a Text entry. Use registry.names() to check registered component names.

Missing peer dependency -- If you see module resolution errors for @json-render/core, install it explicitly: npm install @json-render/core.

Next Steps

← Previous
Quick Start
Next →
Component Registry