Installation

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

Requirements

Supported Angular majors: 20, 21, and 22.

Angular 20–22

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

Node.js compatibility

Use a Node.js version supported by the selected Angular major. Angular 22 supports Node.js ^22.22.3, ^24.15.0, or ^26.0.0. See the Angular compatibility matrix.

Install the Package

npm install @threadplane/render @threadplane/telemetry @json-render/core

Peer Dependencies

The library requires the following peer dependencies:

Package	Version
`@angular/core`	`^20.0.0`, `^21.0.0`, or `^22.0.0`
`@angular/common`	`^20.0.0`, `^21.0.0`, or `^22.0.0`
`@json-render/core`	`^0.16.0`
`@threadplane/telemetry`	`^0.0.66`

Note: Angular packages

@angular/core and @angular/common are already part of any Angular 20–22 project. npm installs the remaining peers automatically, so the explicit @threadplane/telemetry and @json-render/core in the command above are there to pin them in your own package.json.

Configure the Provider

Add provideRender() to your application config. This sets global defaults for every <render-spec> instance in your app.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRender, defineAngularRegistry } from '@threadplane/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 }),
  ],
};

Tip: provideRender() is optional

provideRender() is just 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 win over provider config.

Minimal App Setup

The following is a complete minimal setup:

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

Verify Installation

Once the setup is in place, run your app and check the rendered output:

ng serve

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

Troubleshooting

Warning: 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.