Marquee wont work in Angular after giving build about dynamic-marquee

[tjenkinson]

Hi. Please can you try v2.3.0 and if it still doesn't work provide an example that runs on https://stackblitz.com/ ?

[rakeshnayak360]

Hi, updated version to 2.3.0. Switch the tab, there is new error called ''String missing 'px' suffix".
And after build, same issue as mentioned in title of this issue.
Demo link: https://stackblitz.com/edit/angular-router-basic-example-hjrksg?file=app%2Fviews%2Flogin%2Flogin.component.ts

[rakeshnayak360]

Hi, updated version to 2.3.0. Switch the tab, there is new error called ''String missing 'px' suffix".
And after build, same issue as mentioned in title of this issue.
Demo link: https://stackblitz.com/edit/angular-router-basic-example-hjrksg?file=app%2Fviews%2Flogin%2Flogin.component.ts

[tjenkinson]

I should be able to prevent that error but I think the root of the issue here is not cleaning up before the component tears down.

In the components where you use the marquee could you call clear() on it in a ngOnDestroy function?

More info here: https://angular.io/guide/lifecycle-hooks

[rakeshnayak360]

Core issue is, with the following setup, marquee behaves strangely in dev env and prod env
setup:

this.$marquee = document.getElementById("marquee")!;
    this.marquee = new Marquee(this.$marquee, {
      rate: -100,
      startOnScreen: false,
    });

In dev env, marquee works fine i.e text move from left to right.

But in prod, (After ng build), run the dist/ folder.
text appears directly on screen i.e right side of the screen. Why it behaves so ?

preview of the out put: (sorry i am not able to attach picture)
in Dev:

--------------------------------------------------
|                                      Starts here|
--------------------------------------------------

in Prod:

--------------------------------------------------
| Starts here                                     |
--------------------------------------------------

[rakeshnayak360]

Any updates @tjenkinson ?

[tjenkinson]

@rakeshnayak360 please have a look at https://stackblitz.com/edit/angular-router-basic-example-pwzpdf

This updates to the latest version and adds the tear down function which hopefully solves the problems.

[rakeshnayak360]

$window.style.position = 'relative'; in marquee.js fixed my issue. Thanks for the update. You made my day :)