Angular workflow designer, one module and one endpoint

import { Component, OnDestroy, viewChild } from '@angular/core';
import {
  WorkflowDesignerStrictComponent,
  WorkflowDesignerStrictModule,
} from '@optimajet/workflow-designer-angular/strict';

// The wrapper's component lives in an NgModule, so a standalone component
// imports the module. The /strict entry leaves the stylesheet to angular.json,
// which is what lets `ng build` bundle the designer's fonts.
@Component({
  selector: 'app-designer',
  imports: [WorkflowDesignerStrictModule],
  template: `
    <workflow-designer [schemeCode]="schemeCode" [designerConfig]="designerConfig" />
  `,
})
export class Designer implements OnDestroy {
  private readonly wrapper = viewChild(WorkflowDesignerStrictComponent);

  schemeCode = 'SimpleWF';

  // This object replaces the wrapper's defaults, so it names the div and the
  // upload form itself. Without renderTo, nothing draws.
  designerConfig = {
    renderTo: 'wfe-designer',
    uploadFormId: 'wfe-upload-form',
    uploadFileId: 'wfe-upload-file',
    apiurl: 'http://localhost:5199/Designer/API',
    widthDiff: 0,
    heightDiff: 0,
  };

  // The wrapper does not destroy the designer when Angular removes it.
  ngOnDestroy() {
    this.wrapper()?.innerDesigner?.destroy();
  }
}

import { Component } from '@angular/core';
import { Designer } from './designer';

// @defer moves the designer, about 3.8 MB of script, into its own chunk, so
// the first load stays under the default 1 MB budget of `ng build`. @defer
// splits only standalone components, hence the Designer component.
@Component({
  selector: 'app-root',
  imports: [Designer],
  template: `
    @defer {
      <app-designer />
    }
  `,
})
export class App {}

"styles": [
  "node_modules/@optimajet/workflow-designer-angular/workflowdesigner.min.css",
  "src/styles.css"
]

using System.Collections.Specialized;
using System.Text;
using OptimaJet.Workflow;
using OptimaJet.Workflow.Core.Runtime;
using WfeDesignerApi;

var builder = WebApplication.CreateBuilder(args);

// One WorkflowRuntime for the whole app. SQLite keeps the sample self-contained.
builder.Services.AddSingleton<WorkflowRuntime>(_ =>
    WorkflowRuntimeSetup.Create("Data Source=workflow.db"));

// The designer runs in the browser on another origin (a static page, Vite,
// ng serve), so the API must say so. Name the origins you serve; never
// AllowAnyOrigin outside development.
builder.Services.AddCors(options => options.AddPolicy("designer", policy =>
    policy.WithOrigins("http://localhost:3001", "http://localhost:5173", "http://localhost:4200")
          .AllowAnyHeader()
          .AllowAnyMethod()));

var app = builder.Build();
app.UseCors("designer");

// The endpoint the designer talks to: query and form parameters go to
// WorkflowRuntime.DesignerAPIAsync, an uploaded file becomes a stream.
app.MapMethods("/Designer/API", new[] { "GET", "POST" }, async (HttpRequest request, WorkflowRuntime runtime) =>
{
    var parameters = new NameValueCollection();
    foreach (var q in request.Query)
    {
        parameters.Add(q.Key, q.Value.FirstOrDefault());
    }

    Stream? fileStream = null;
    if (HttpMethods.IsPost(request.Method) && request.HasFormContentType)
    {
        var form = await request.ReadFormAsync();
        foreach (var key in form.Keys)
        {
            if (parameters[key] is null)
            {
                parameters.Add(key, form[key]);
            }
        }
        if (form.Files.Count > 0)
        {
            fileStream = form.Files[0].OpenReadStream();
        }
    }

    var (result, hasError) = await runtime.DesignerAPIAsync(parameters, fileStream);

    if (string.Equals(parameters["operation"], "downloadscheme", StringComparison.OrdinalIgnoreCase) && !hasError)
    {
        return Results.File(Encoding.UTF8.GetBytes(result), "text/xml");
    }
    return Results.Content(result);
}).RequireCors("designer");

// Start the runtime (and run the SQLite migrations) before the first request.
app.Services.GetRequiredService<WorkflowRuntime>();

app.Run();

# 1. The Designer API on :5199 (Workflow Engine 22.1.0 on SQLite)
cd samples/designer-api
dotnet run --urls http://localhost:5199

# 2. The Angular app on :4200 (Angular 22.2.1, Node 24)
cd samples/angular-workflow-designer
npm install
npx ng serve

# 3. The production build: the designer in its own chunk
npx ng build