Angular 12-15

[Luandrada]

I’m using Foblex Flow in my Angular 15 project (15.2.3v) , but I’m encountering several errors during compilation. I’ve followed the setup steps from the documentation, but the errors persist. Here are the details:

Errors:
Type errors related to Angular imports:

• TS2305: Module '"@angular/core"' has no exported member 'Signal'.

• TS2305: Module '"@angular/core"' has no exported member 'DestroyRef'.

• TS2305: Module '"@angular/core"' has no exported member 'CreateEffectOptions'.

• TS2694: Namespace has no exported member 'EffectRef'.

Errors in directive bindings:

• TS2344: Type '{ fResizeHandleType: { alias: "fResizeHandleType"; required: true; isSignal: true; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
• Can't bind to 'fNodePosition' since it isn't a known property of 'div'.

What I've tried:

• I installed Foblex Flow version ^17.6.1 (also tried 12.3.7), which should be compatible with Angular 15.

• I followed the setup from the official documentation and imported FFlowModule in my app.module.ts.

• I’ve ensured that all necessary dependencies are installed and up-to-date by running npm install.

What I need help with:

• Could you please help me identify if there are any missing steps or configurations in the setup process?

• Are there any known compatibility issues between Foblex Flow and Angular 15, specifically with types or directives?

• How can I resolve the type errors related to custom directives, such as fResizeHandleType and fNodePosition?

Any help or guidance would be greatly appreciated. Thank you in advance.

Here are some photos of my code attached below

[siarheihuzarevich]

Thanks for reaching out and for providing the details.

For Angular 15 you’ll need to use the following Foblex Flow and related package versions (see screenshot for exact versions). Please note:
• This setup is not actively maintained anymore.
• Any bugs found in this version will not be fixed.
• The current documentation refers to the latest release and may not fully apply to this older version.

If possible, we strongly recommend upgrading to Angular 16+ to take advantage of the latest features, fixes, and up-to-date documentation.

💬 If Foblex Flow has been helpful — a GitHub star is always appreciated 🙂
🌟 Star the repo

[Luandrada]

Thanks for your response! I created a new project with the exact versions you mentioned, and I’m no longer getting the error, but the chart is still not rendering. I have one last question regarding the import in the AppModule — it doesn’t let me import FoblexFlowModule as suggested in the documentation, but instead tells me to import FFlowModule. Is that correct for these versions?

[siarheihuzarevich]

Here’s a working example for that version — and yes, you should import FFlowModule, not FoblexFlowModule.

<f-flow fDraggable>
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1"></f-connection>

    <div
      fNode
      fDragHandle
      fNodeOutput
      [fNodePosition]="{ x: 32, y: 32 }"
      fOutputId="output1"
      fOutputConnectableSide="right"
    >
      Node 1
    </div>

    <div
      fNode
      fDragHandle
      fNodeInput
      [fNodePosition]="{ x: 240, y: 32 }"
      fInputId="input1"
      fInputConnectableSide="left"
    >
      Node 2
    </div>
  </f-canvas>
</f-flow>

.f-flow {
  height: 400px;
}

.f-node {
  padding: 24px;
  color: rgba(60, 60, 67);
  text-align: center;
  background: #ffffff;
  border-radius: 2px;
  border: 0.2px solid rgba(60, 60, 67);

  &.f-selected {
    border-color: #3451b2;
  }
}

.f-drag-handle {
  cursor: move;
}

::ng-deep {
  .f-connection {
    .f-connection-drag-handle {
      fill: transparent;
    }

    .f-connection-selection {
      stroke-width: 10;
    }

    .f-connection-path {
      stroke: rgba(60, 60, 67);
      stroke-width: 2;
    }

    &.f-selected {
      .f-connection-path {
        stroke: #3451b2;
      }
    }
  }
}

With this setup and FFlowModule in your imports, the chart should render properly in Angular 15 with the compatible Foblex Flow version.

💬 If Foblex Flow has been helpful — a GitHub star is always appreciated 🙂
🌟 Star the repo