Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS not loading while integration in angular app

See original GitHub issue

I tried integrating elsa designer into my angular application following the docs but I’m facing the following issue.

CSS not loading
Reference errors in console

Here’s how my dependencies look like

"dependencies": {
    "@angular/animations": "^15.1.1",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@elsa-workflows/elsa-workflow-designer": "^0.0.61",
    "bootstrap": "^5.2.3",
    "monaco-editor": "^0.34.1",
    "primeflex": "^3.3.0",
    "primeicons": "^6.0.1",
    "primeng": "^15.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular/cli": "~15.0.5",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.2"
  }

index.html

<head>
.
.
.
<script src="node_modules/@elsa-workflows/elsa-workflow-designer/dist/elsa-workflow-designer.js"></script>
    <script
      type="module"
      src="https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.esm.js"
    ></script>
    <script
      nomodule=""
      src="https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.js"
    ></script>
</head>

app.component.html

<wf-designer-host
      #wfhost
      id="designerHost"
      canvas-height="300vh"
      [attr.data-activity-definitions]="activityDefinition"
      [attr.data-workflow]="workflowModel"
    >
    </wf-designer-host>

Issue Analytics

State:
Created 7 months ago
Reactions:3
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

jdevillardcommented, Feb 9, 2023

Hello,

try to take a look on the following link:

https://jeremiedevillard.wordpress.com/2021/09/14/using-elsa-workflow-dashboard-in-angular-app/

I need to update to latest angular and I’ve work on a Angular components to facilitate the integration. (I need to take the time to push my change)

0reactions

NrujalSharmacommented, Feb 14, 2023

Hello, This works.

Thank you very much @jdevillard and @Snotax

Hello,

try to take a look on the following link:

https://jeremiedevillard.wordpress.com/2021/09/14/using-elsa-workflow-dashboard-in-angular-app/

I need to update to latest angular and I’ve work on a Angular components to facilitate the integration. (I need to take the time to push my change)

Top Results From Across the Web

How should we handle loading CSS files correctly in an ...

1 Answer. In Angular application, you should not load CSS files like you mentioned in AppComponent File. You have correctly added bootstrap ......

Angular styles.css not being loaded · Issue #877

The styles of my angular application loaded from github are not being loaded. As you can see from the console in the sandbox...

Component styles

While Angular's emulated style encapsulation prevents styles from escaping a component, it does not prevent global CSS from affecting the entire page.

Dynamically Load CSS with the Angular CLI | juri.dev

This time we'll explore how to customize the Angular CLI s.t. we can lazy load CSS files on the fly. Normally if you...

CSS not loading for DataGrid Angular

I'm using Angular and Calling API to load in dxDataGrid. Data is getting load but without CSS. Whenever I'm trying to give CCS...