GoJS with Angular 14.x works locally but not on Stackblitz

[SigmaOutdoors]

I am trying to have a discussion with support and it would be very easy to share code on Stackblitz, but once I upgrade after Angular 12.5 things stop working. Here is an example I got up to Angular 12.5 then past that it won't work, just to be clear the only thing I did between 12.5 working example is upgrade dependencies:

Works (v12.5)

https://stackblitz.com/edit/angular-gojs-xa4mc1?file=README.md

Does NOT work (v14+)

https://stackblitz.com/edit/angular-gojs-48pipq?file=README.md

Error in src/app/library/library.component.ts (1:29) Cannot find module '@angular/compiler/src/render3/r3_ast' or its corresponding type declarations.

Here is another example that works LOCALLY on my machine but doesn't work in Stackblitz:

https://stackblitz.com/edit/github-xjnzp2?file=src/app/_components/drag-drop/drag-drop.component.ts

Error in src/app/app.module.ts (19:5) 'GojsAngularModule' does not appear to be an NgModule class.

[WalterNorthwoods]

In looking at the v14 "Does NOT work" sample in Stackblitz, I notice that the package.json file has this:

    "gojs": "^2.2.12",
    "gojs-angular": "^2.0.4",

but the package-lock.json file has this:

    "gojs": {
      "version": "2.1.42",
      "resolved": "https://registry.npmjs.org/gojs/-/gojs-2.1.42.tgz",
      "integrity": "sha512-PurmYw8Uefl9UbqjLl2MwwYRRwq4RsgcfGQWawgPfngQU5IFSopJNNsNZ9V/B+DlTUa6b21f3NFpslp19moOjQ=="
    },
    "gojs-angular": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/gojs-angular/-/gojs-angular-2.0.0.tgz",
      "integrity": "sha512-PG2CzOr3a5ax77NoOaK/z4rES1SLriH5h9TwL1p6hrem7O/5BKju6JzOQyaC1twJRSOOwLyvabOp4IuiWBayRA==",
      "requires": {
        "immer": "^9.0.1",
        "tslib": "^2.0.0"
      }
    },

Could you please explain how this is possible? If you fix the dependencies, do things work better?

[SigmaOutdoors]

This is a good catch. The package-lock.json is a generated file, maybe Stackblitz got confused, in any event I removed it, re-updated the dependencies then found that this was causing the render3 compiler issue

// THIS was causing render3 compile issue, not sure why it was there, it was unreferenced... // import { NullVisitor } from @.***/compiler/src/render3/r3_ast';

So with updated go dependencies "gojs": "^2.2.13", "gojs-angular": "^2.0.4", is producing the same error as the other Angular14 project:

Error in src/app/app.module.ts (18:5) 'GojsAngularModule' does not appear to be an NgModule class.

Updated Code here:

https://stackblitz.com/edit/angular-gojs-48pipq?file=README.md https://stackblitz.com/edit/angular-gojs-48pipq?file=README.md

On Jul 27, 2022, at 11:00 AM, WalterNorthwoods @.***> wrote:

In looking at the v14 "Does NOT work" sample in Stackblitz, I notice that the package.json file has this:

"gojs": "^2.2.12",
"gojs-angular": "^2.0.4",

but the package-lock.json file has this:

"gojs": {
  "version": "2.1.42",
  "resolved": "https://registry.npmjs.org/gojs/-/gojs-2.1.42.tgz",
  "integrity": "sha512-PurmYw8Uefl9UbqjLl2MwwYRRwq4RsgcfGQWawgPfngQU5IFSopJNNsNZ9V/B+DlTUa6b21f3NFpslp19moOjQ=="
},
"gojs-angular": {
  "version": "2.0.0",
  "resolved": "https://registry.npmjs.org/gojs-angular/-/gojs-angular-2.0.0.tgz",
  "integrity": "sha512-PG2CzOr3a5ax77NoOaK/z4rES1SLriH5h9TwL1p6hrem7O/5BKju6JzOQyaC1twJRSOOwLyvabOp4IuiWBayRA==",
  "requires": {
    "immer": "^9.0.1",
    "tslib": "^2.0.0"
  }
},

Could you please explain how this is possible? If you fix the dependencies, do things work better?

— Reply to this email directly, view it on GitHub https://github.com/NorthwoodsSoftware/gojs-angular/issues/44#issuecomment-1196873461, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFN5CQSTPJ3UVTNVKEMGTO3VWFFHNANCNFSM54Z456LQ. You are receiving this because you authored the thread.

[SigmaOutdoors]

In order to make things better organized, I have renamed the projects and and they are available here:

https://stackblitz.com/@SigmaOutdoors

Angular GoJs Example 12.2.5 - Works                       // Working example, upgraded and working as far as Angular 12.2.5

Angular GoJs Example Upgrade to 14.x - Compile Error      // 12.2.5 Example upgraded to 14+ : Error in src/app/app.module.ts (18:5)  'GojsAngularModule' does not appear to be an NgModule class.

Sigma GoJs Angular v14+ - Compile Error                   // 14+ A different example that works locally but not on StackBlitz  : Error in src/app/app.module.ts (18:5)  'GojsAngularModule' does not appear to be an NgModule class.

[WalterNorthwoods]

Hmmm. I'm sorry, but I have been unable to figure out exactly which files are being loaded in Stackblitz. I noticed that an incompatibility of Angular 14 compared with Angular 12 is that ES modules are now the default, not UMD modules. But I couldn't find the actual file that it loaded for GoJS to see whether it loaded "go.js" or "go-module.js". If it's actually using ES modules, you'll need to use "go-module.js".

Note that the package.json for GoJS includes this setting:

  "module": "release/go-module.js",

But maybe that's not enough for the Angular environment?

[SigmaOutdoors]

It sounds like you're on to something, I tried going back a bit in my tsconfig but get the same error. I have provided the valid values in comments below I didn't really see anything about UDM...

"moduleResolution": "Classic",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2015",
    "lib": [
      "es2015",
      "dom"
    ]
  }
}

/*  target & module : 
 Valid values: "ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Core", "ES2015.Generator", "ES2015.Iterable", "ES2015.Promise", "ES2015.Proxy", "ES2015.Reflect", "ES2015.Symbol.WellKnown", "ES2015.Symbol", "ES2016", "ES2016.Array.Include", "ES2017", "ES2017.Intl", "ES2017.Object", "ES2017.SharedMemory", "ES2017.String", "ES2017.TypedArrays", "ES2018", "ES2018.AsyncGenerator", "ES2018.AsyncIterable", "ES2018.Intl", "ES2018.Promise", "ES2018.Regexp", "ES2019", "ES2019.Array", "ES2019.Object", "ES2019.String", "ES2019.Symbol", "ES2020", "ES2020.BigInt", "ES2020.Promise", "ES2020.String", "ES2020.Symbol.WellKnown", "ESNext", "ESNext.Array", "ESNext.AsyncIterable", "ESNext.BigInt", "ESNext.Intl", "ESNext.Promise", "ESNext.String", "ESNext.Symbol", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts", "Webworker.Iterable", "ES7", "ES2021", "ES2020.SharedMemory", "ES2020.Intl", "ES2021.Promise", "ES2021.String", "ES2021.WeakRef", "ESNext.WeakRef", "es2021.intl", "ES2022", "ES2022.Array", "ES2022.Error", "ES2022.Intl", "ES2022.Object", "ES2022.String".(1)

 #
moduleResolution : "Classic", "Node", "Node16", "NodeNext".

*/

[SigmaOutdoors]

This is issue important to me to be able to communicate with you guys regarding and problems as I use GoJS with Angular. I have been coding in Angular for years and Stackblitz is by far the most concise way to communicate and demonstrate problems by creating reproducible code that we can both edit and compile without downloads or zips etc.

I have opened an issue with Stackblitz to hopefully find some way around this.

https://github.com/stackblitz/core/issues/2395 https://github.com/stackblitz/core/issues/2395

Just as an observation I see your GoJS is compiled for Angular 11, while it “shouldn’t matter” and I can compile locally, being a 3 releases behind generally doesn’t bode well as Angular moves pretty fast. I try not to let my active projects get more than one release behind.

"@angular/animations": "~11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0"

On Jul 27, 2022, at 2:03 PM, WalterNorthwoods @.***> wrote:

Hmmm. I'm sorry, but I have been unable to figure out exactly which files are being loaded in Stackblitz. I noticed that an incompatibility of Angular 14 compared with Angular 12 is that ES modules are now the default, not UMD modules. But I couldn't find the actual file that it loaded for GoJS to see whether it loaded "go.js" or "go-module.js". If it's actually using ES modules, you'll need to use "go-module.js".

Note that the package.json for GoJS includes this setting:

"module": "release/go-module.js", But maybe that's not enough for the Angular environment?

— Reply to this email directly, view it on GitHub https://github.com/NorthwoodsSoftware/gojs-angular/issues/44#issuecomment-1197114548, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFN5CQWMNJD2F4YOHS7IKOTVWF2YJANCNFSM54Z456LQ. You are receiving this because you authored the thread.

[WalterNorthwoods]

To clarify, the GoJS library has no dependencies on any library or framework, other than the HTML DOM and JavaScript that the browser provides. The gojs-angular components in this repository indeed depend on Angular, currently version 11.

We were able to reproduce your problem with Stackblitz after upgrading this gojs-angular project to Angular 14. Everything is fine when running locally, without Stackblitz.

Always keeping up with the latest version can harm most people who just want to use a stable version.

Good luck with the Stackblitz team.

[SigmaOutdoors]

We were able to reproduce your problem with Stackblitz after upgrading this gojs-angular project to Angular 14. Everything is fine when running locally, without Stackblitz.

This is good to know, thank you for trying that.

Always keeping up with the latest version can harm most people who just want to use a stable version.

Agreed, sort of. That's why there are versions, if people want to sit on a 2.5 year old version, that is then their choice. Others shouldn't have to be penalized with that choice, as I said Angular moves fast. As we agreed, your package should work for a while, but the rate at which Angular updates, I wouldn't want to be 3 versions behind (as a developer).