Not compatible with Angular 13

graphicsxp · December 16, 2021, 8:42pm

After upgrading to Angular 13, the only module that I cannot acces in my application is the one that references go-js. When I try to lazy-load the module that references go-js, I get this exception :

Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'Layout' in undefinedTypeError: Cannot use 'in' operator to search for 'Layout' in undefined

If I click on the link, it opens my module minified code and it seems to crash here:
eq=["Layout","GoJSScriptURL"],fq=this;eq[0]in fq

EDIT
bumped into this thread while googling for GoJsScriptURL. Looks like an issue that has occured in the past already and was fixed, but it’s back again :

Not sure what to do with that but in any case can you make the wrapper compatible with Angular 13 please ?

And here’s my callstack, as you can see gojs is the first call in the stack :

walter · December 16, 2021, 9:32pm

Hmmm. We’ll investigate it.

graphicsxp · December 19, 2021, 9:06am

Hello
any news on this issue ?
It is rather urgent as it is the only reason we cannot upgrade to angular 13.

Just upgrading the basic sample to angular 13 will not be enough (it works fine with angular 13). I think you also need to lazy-load a module that references gojs. At least this is my use-case. It may have to do with the way gojs-angular wrapper was compiled/packaged.

walter · December 19, 2021, 12:03pm

How do you import the GoJS library and gojs-angular in each of your files? Do you import any GoJS extensions?

graphicsxp · December 19, 2021, 7:25pm

In my lazy-loaded module file

import * as go from 'gojs';
import { GojsAngularModule } from 'gojs-angular';

@NgModule({
  declarations: [
    ProcessDesignerComponent
  ],
  imports: [
    PROCESS_MANAGEMENT_ROUTES,
    CommonModule,
    FormsModule,
    GojsAngularModule
  ],
})
export class ProcessManagementModule {
  constructor() {
    go.Diagram.licenseKey = environment.goJsLicenseKey;
  }
}

graphicsxp · December 21, 2021, 7:11am

Any news please ?

ryanj · December 21, 2021, 1:56pm

Sorry, it’s been a busy week. I’ll investigate today

ryanj · December 21, 2021, 7:27pm

Sorry, I’m having trouble reproducing your problem. I’ve been working on it all day.

Here is a repo I made that lazy loads gojs-angular when the /gojs route is accessed. Please let me know if it works for you, and note the changes between my project and yours

graphicsxp · December 21, 2021, 10:26pm

This issue is very annoying because it stops us from upgrading to the latest angular version but it is hard to reproduce indeed.

In your sample, you are not really doing lazy-loading. You should remove GojsModule from the imports in app.module.
Then in home.html :

<a [routerLink]="'/gojs'">load module</a>

Load the app at localhost:4200/home then click on the link. That will lazy-load the gojs module (you can see the chunck file being downloaded)

However, unfortunately, this still works and does not show the exception I see in my app.

It seems it may be related to minification. Does the link I provided above give you any hints ? It’s the exact same error, so it seems related…

graphicsxp · December 21, 2021, 10:59pm

I think I have misled you with lazy-loading.

I disabled lazy-loading in my app, and i’m now loading gojs module directly with the main.js content. I still get the same exception :

I don’t see any difference between your sample and my app, other than the fact that my app is way bigger. But no other third-party libs is giving me this error.

graphicsxp · December 21, 2021, 11:29pm

I have been debugging the minified code in my app for the version with Angular 12 and the version with Angular 13. I spotted the difference which leads to the exception, but I do not know why this happens.

Angular 13 version
at the end of the line, this is stored in B1. Then the statement O0 in B1 just below raises the exception.
This is because this is undefined.

Angular 12 version.
same code but this time, this is not null and it refers to the current window

A0[0]in E1 returns false but it does not raise any exception and my app works just fine.

any idea ?

simon · December 21, 2021, 11:37pm

Which version of GoJS are you using? Can you check again with the latest, 2.1.56, if you are not using that? We actually made a change to the global object. It’s not necessarily relevant, but it might be.

graphicsxp · December 22, 2021, 8:55am

Finally, this is it !

My versions were :
“gojs”: “^2.1.30”,
“gojs-angular”: “2.0.4”,

I upgraded to :
“gojs”: “^2.1.56”,
“gojs-angular”: “2.0.4”,

And I can now load my module. What an annoying issue that was…
Thanks !

simon · December 22, 2021, 1:09pm

Ah I see. We fixed some issues with the shadow DOM since 2.1.30, which was possibly the cause.