Registry / web-framework / gojs-angular

gojs-angular

JSON →
library20.0.0jsnpmunverified

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.

npm install gojs-angular
INSTALL
IMPORT
SIG · GOJS-ANGULAR
G
gojs-angular
web-frameworkjavascriptv20.0.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

GojsDiagramComponent
import { GojsDiagramComponent } from 'gojs-angular';
const GojsDiagramComponent = require('gojs-angular').GojsDiagramComponent;
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
import { DiagramModule } from 'gojs-angular';
import { DiagramModule } from 'gojs-angular/src/diagram';
Correct import path is from the package root; subpath imports are not supported.

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 }); } }
Debug
Known issues
breakingVersion 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+.
affects: >=20.0.0
breakingImmer 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.
affects: >=20.0.0
deprecatedThe 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.
affects: >=20.0.0
gotchaThe 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.
affects: all
gotchaNode 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.
affects: >=20.0.0
Errors
Common errors & fixes
ERROR NullInjectorError: No provider for GojsDiagramComponent!
GojsDiagramComponent not imported in standalone component or NgModule.
fix
Add GojsDiagramComponent (or DiagramModule) to imports array of the component or NgModule.
TypeError: Cannot read properties of undefined (reading 'make')
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: immer version mismatch: expected 11.x, got 10.x
Incorrect immer version installed; peer dependency requires ^11.1.3.
fix
Run npm install immer@^11.1.3 --save
Error: (SystemJS) Unexpected value 'DiagramModule' imported by module 'AppModule'
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.
Upgrade
Version history
20.0.0latest on npm
Audit
Dependencies
@angular/commonrequiredProvides Angular common directives and pipes; peer dependency for Angular 20 compatibility.
@angular/corerequiredNeeded for Angular component and service infrastructure; peer dependency for Angular 20 compatibility.
gojsrequiredCore GoJS library for diagramming functionality; peer dependency version 3.x.
immerrequiredUsed for immutable state management within the Angular wrapper; peer dependency version ^11.1.3.
Agent activity
8 hits · last 30 days
node
8
Resources
gojs-angular — npm install gojs-angular · libregistry