{"id":18395,"library":"gojs-angular","title":"GoJS Angular","description":"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.","status":"active","version":"20.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install gojs-angular","lang":"bash","label":"npm"},{"cmd":"yarn add gojs-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add gojs-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides Angular common directives and pipes; peer dependency for Angular 20 compatibility.","package":"@angular/common","optional":false},{"reason":"Needed for Angular component and service infrastructure; peer dependency for Angular 20 compatibility.","package":"@angular/core","optional":false},{"reason":"Core GoJS library for diagramming functionality; peer dependency version 3.x.","package":"gojs","optional":false},{"reason":"Used for immutable state management within the Angular wrapper; peer dependency version ^11.1.3.","package":"immer","optional":false}],"imports":[{"note":"ESM-only in Angular; CommonJS require is not standard for Angular libraries. TypeScript types are bundled.","wrong":"const GojsDiagramComponent = require('gojs-angular').GojsDiagramComponent;","symbol":"GojsDiagramComponent","correct":"import { GojsDiagramComponent } from 'gojs-angular';"},{"note":"Named export; use alongside GojsDiagramComponent for palette diagrams.","wrong":"","symbol":"GojsPaletteComponent","correct":"import { GojsPaletteComponent } from 'gojs-angular';"},{"note":"Named export; provides an overview of the main diagram.","wrong":"","symbol":"GojsOverviewComponent","correct":"import { GojsOverviewComponent } from 'gojs-angular';"},{"note":"Correct import path is from the package root; subpath imports are not supported.","wrong":"import { DiagramModule } from 'gojs-angular/src/diagram';","symbol":"DiagramModule","correct":"import { DiagramModule } from 'gojs-angular';"}],"quickstart":{"code":"import { Component } from '@angular/core';\nimport { DiagramModule, GojsDiagramComponent } from 'gojs-angular';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [DiagramModule],\n template: `\n \n `\n})\nexport class AppComponent {\n nodeData = [\n { key: 1, text: 'A' },\n { key: 2, text: 'B' }\n ];\n linkData = [\n { from: 1, to: 2 }\n ];\n modelData = { class: 'go.GraphLinksModel' };\n\n initDiagram() {\n const $$ = (window as any).go.GraphObject.make;\n return $$((window as any).go.Diagram, 'diagramDiv', {\n 'undoManager.isEnabled': true\n });\n }\n}\n","lang":"typescript","description":"Shows minimal setup with GojsDiagramComponent in a standalone Angular component, including node and link data arrays and an initDiagram function."},"warnings":[{"fix":"Upgrade Angular to 20.0.7+ and GoJS to 3.0.18+.","message":"Version 20.0.0 requires Angular 20 and GoJS 3.x. Previous versions (e.g., 2.x) are not compatible.","severity":"breaking","affected_versions":">=20.0.0"},{"fix":"Ensure immer version ^11.1.3 is installed.","message":"Immer 11.x is required. Older immer versions (e.g., 10.x) can cause runtime errors with immutable data handling.","severity":"breaking","affected_versions":">=20.0.0"},{"fix":"Use standalone components with GojsDiagramComponent directly, without importing DiagramModule in NgModule.","message":"The DiagramModule is deprecated in favor of standalone components. Future versions may remove the module entirely.","severity":"deprecated","affected_versions":">=20.0.0"},{"fix":"Always define an initDiagram method that returns a properly configured go.Diagram.","message":"The initDiagram function must be provided and must return a go.Diagram instance; otherwise, diagram fails to render silently.","severity":"gotcha","affected_versions":"all"},{"fix":"Import { produce } from 'immer' and use it to create updated copies of nodeDataArray and linkDataArray.","message":"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.","severity":"gotcha","affected_versions":">=20.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add GojsDiagramComponent (or DiagramModule) to imports array of the component or NgModule.","cause":"GojsDiagramComponent not imported in standalone component or NgModule.","error":"ERROR NullInjectorError: No provider for GojsDiagramComponent!"},{"fix":"Install gojs (npm install gojs) and ensure it's available: import * as go from 'gojs'; then use go.GraphObject.make.","cause":"GoJS library not properly loaded or 'go' global not available in initDiagram.","error":"TypeError: Cannot read properties of undefined (reading 'make')"},{"fix":"Run npm install immer@^11.1.3 --save","cause":"Incorrect immer version installed; peer dependency requires ^11.1.3.","error":"Error: immer version mismatch: expected 11.x, got 10.x"},{"fix":"Remove DiagramModule import if using standalone components; otherwise, verify NgModule imports syntax.","cause":"DiagramModule incorrectly imported in an Angular NgModule that doesn't support the module system.","error":"Error: (SystemJS) Unexpected value 'DiagramModule' imported by module 'AppModule'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}