GoJS Angular

20.0.0 verified Sat Apr 25 auth: no javascript

GojsAngular is the official Angular wrapper for GoJS, a JavaScript library for interactive diagrams and graphs. Version 20.0.0 targets Angular 20 and GoJS 3.x, with peer dependencies on @angular/common >=20.0.7, @angular/core >=20.0.7, gojs >=3.0.18, and immer ^11.1.3. It provides Angular components and services to integrate GoJS diagrams seamlessly into Angular applications. Key differentiators: tight integration with Angular's change detection and lifecycle, support for immutable data via immer, and alignment with GoJS's latest features. Release cadence follows Angular major versions.

Common errors

error ERROR NullInjectorError: No provider for GojsDiagramComponent! ↓

cause GojsDiagramComponent not imported in standalone component or NgModule.

fix

Add GojsDiagramComponent (or DiagramModule) to imports array of the component or NgModule.

error TypeError: Cannot read properties of undefined (reading 'make') ↓

cause GoJS library not properly loaded or 'go' global not available in initDiagram.

fix

Install gojs (npm install gojs) and ensure it's available: import * as go from 'gojs'; then use go.GraphObject.make.

error Error: immer version mismatch: expected 11.x, got 10.x ↓

cause Incorrect immer version installed; peer dependency requires ^11.1.3.

fix

Run npm install immer@^11.1.3 --save

error Error: (SystemJS) Unexpected value 'DiagramModule' imported by module 'AppModule' ↓

cause DiagramModule incorrectly imported in an Angular NgModule that doesn't support the module system.

fix

Remove DiagramModule import if using standalone components; otherwise, verify NgModule imports syntax.

Warnings

breaking Version 20.0.0 requires Angular 20 and GoJS 3.x. Previous versions (e.g., 2.x) are not compatible. ↓

fix Upgrade Angular to 20.0.7+ and GoJS to 3.0.18+.

breaking Immer 11.x is required. Older immer versions (e.g., 10.x) can cause runtime errors with immutable data handling. ↓

fix Ensure immer version ^11.1.3 is installed.

deprecated The DiagramModule is deprecated in favor of standalone components. Future versions may remove the module entirely. ↓

fix Use standalone components with GojsDiagramComponent directly, without importing DiagramModule in NgModule.

gotcha The initDiagram function must be provided and must return a go.Diagram instance; otherwise, diagram fails to render silently. ↓

fix Always define an initDiagram method that returns a properly configured go.Diagram.

gotcha Node and link data arrays are immutable; use immer functions (e.g., produce) from peer dependency to update state, otherwise change detection may not trigger. ↓

fix Import { produce } from 'immer' and use it to create updated copies of nodeDataArray and linkDataArray.

Install

npm install gojs-angular

yarn add gojs-angular

pnpm add gojs-angular

Imports

GojsDiagramComponent
wrong
```
const GojsDiagramComponent = require('gojs-angular').GojsDiagramComponent;
```
correct
```
import { GojsDiagramComponent } from 'gojs-angular';
```
ESM-only in Angular; CommonJS require is not standard for Angular libraries. TypeScript types are bundled.
GojsPaletteComponent
```
import { GojsPaletteComponent } from 'gojs-angular';
```
Named export; use alongside GojsDiagramComponent for palette diagrams.
GojsOverviewComponent
```
import { GojsOverviewComponent } from 'gojs-angular';
```
Named export; provides an overview of the main diagram.

DiagramModule

wrong

import { DiagramModule } from 'gojs-angular/src/diagram';

correct

import { DiagramModule } from 'gojs-angular';

Correct import path is from the package root; subpath imports are not supported.

Quickstart

Shows minimal setup with GojsDiagramComponent in a standalone Angular component, including node and link data arrays and an initDiagram function.

import { Component } from '@angular/core';
import { DiagramModule, GojsDiagramComponent } from 'gojs-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DiagramModule],
  template: `
    <gojs-diagram
      [initDiagram]="initDiagram"
      [nodeDataArray]="nodeData"
      [linkDataArray]="linkData"
      [modelData]="modelData"
    ></gojs-diagram>
  `
})
export class AppComponent {
  nodeData = [
    { key: 1, text: 'A' },
    { key: 2, text: 'B' }
  ];
  linkData = [
    { from: 1, to: 2 }
  ];
  modelData = { class: 'go.GraphLinksModel' };

  initDiagram() {
    const $$ = (window as any).go.GraphObject.make;
    return $$((window as any).go.Diagram, 'diagramDiv', {
      'undoManager.isEnabled': true
    });
  }
}