Stack overflow: solution.js doesn't play well with Angular Zone.js

[xiao8579]

Describe the bug When deploying the Pipeline Hazards Patrol solution in Designer, the deployment process hangs at addItem call for the Web Experience item. At this point, all the rest items inside this solution have been created already, only missing the web experience item in the target folder.

This is a stack overflow issue and happens on both Production and DEVEXT versions of designer. Current solution.js version in Designer: 0.20.1

To Reproduce Steps to reproduce the behavior:

1. Go to https://devext.arcgis.com/apps/quickcapture/projects (QuickCapture_Web | QuickCapture1)
2. Click New project, select Start from template
3. Click From organization.
4. Select Pipeline Hazards Patrol and click Use template
5. See the error below.

Additional context

1. The issue seems to only affect the QuickCapture Designer client so far, but it stops the product team from creating a QuickCapture solution template that will include a web experience app, and even it's created, the deployment process will fail for our users. Survey123 Web (based on Agular too) is also planning to adopt solution.js, this issue will potentially affect S123 in future.
2. The issue shows that Solution.js doesn't play well with Zone.js. QuickCapture Designer can't stop using zone.js because it's a core dependency of Angular.
3. Based on my testing, the deployment process will fail in Designer for all Web Experience when included in the solution item.

Cc: @MikeTschudi

[MikeTschudi]

@xiao8579, would you please provide an Angular test case that doesn't involve the QuickCapture Designer? From what I can tell using the Designer, the compressed code doesn't match solution.js, and so it's not possible to understand or debug what is happening.

[jonpaez]

@MikeTschudi, here are some steps to create an angular app:

1. Install the angular cli npm install -g @angular/cli

2. Navigate to the folder you want to create your app in and run

   ng new solution-test
   cd solution-test
   npm install @esri/arcgis-rest-auth@2.19.0 @esri/arcgis-rest-feature-layer@2.19.0 @esri/arcgis-rest-portal@2.19.0 @esri/arcgis-rest-request@2.19.0 @esri/arcgis-rest-service-admin@2.19.0 @esri/hub-common@6.13.3 @esri/hub-sites@6.13.3 @esri/hub-types@6.10.0 @esri/hub-teams@6.10.0 @esri/hub-initiatives@6.10.0 @esri/solution-common@0.20.1 @esri/solution-deployer@0.20.1 @esri/solution-file@0.20.1 @esri/solution-feature-layer@0.20.1 @esri/solution-form@0.20.1 @esri/solution-hub-types@0.20.1 @esri/solution-group@0.20.1 @esri/solution-simple-types@0.20.1 @esri/solution-storymap@0.20.1 @esri/solution-types@0.9.2 @esri/solution-viewer@0.20.1
   ng serve

   Note: ng new command will ask you if you want to include routing, say no, and will ask you to select a style method. CSS is fine.

3. Update the src/app/app.component.ts with the following:

   
   import { Component, OnInit } from '@angular/core';
   import { deploySolution } from '@esri/solution-deployer';
   import { UserSession } from '@esri/arcgis-rest-auth';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'solution-test';

public ngOnInit() { let userSession = new UserSession({ portal: 'https://www.arcgis.com/sharing/rest', token: '', username: '' }); deploySolution('2ba6c67d80a24730a7ff61c65e612682', userSession); } }

4. Update the session constructor to include your token and user name. That's the Id for our solution, you can update it or ask @xiao8579 to give your account access.
5. Navigate to http://localhost:4200/ and the open the dev tools to see the error message. 

Note: you build the angular project with `ng serve`, but the set up rebuild automatically when you make changes. 

[MikeTschudi]

Alternate credentialling:

    let userSession = new UserSession({ portal: 'https://www.arcgis.com/sharing/rest', username: '', password: '' });

Solution item 443a891da9784128836490bf67b0d82f is a public item that contains only a Web Experience and its dependencies and that duplicates the problem.

• Web Experience f596770996244612a788d6d964c03ed5
• Web Map bfb3131f7636423497ffc467eb21e99a
• Feature Service e874c044c72e4b8ea59da054c6bea7b4
• Feature Service 2934339b67bf487293ae04fc5b8725bc

Running deploySolution with console progress

    deploySolution('443a891da9784128836490bf67b0d82f', userSession, { consoleProgress: true });

shows that the three dependencies finish deployment successfully but that the Web Experience only reports having been started--not even created.

[MikeTschudi]

The Web Experience deployer begins by calling the Hub.js version of cloneObject on the templateDictionary, which attempts to make a deep copy of the dictionary. The dictionary contains a placeholder entry for the Web Experience with a promise to be fulfilled when the item is deployed. Angular appears to add its own promise handling that contains a circular dependency:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Zone'
    |     property '_zoneDelegate' -> object with constructor 'ZoneDelegate'
    --- property 'zone' closes the circle
    at JSON.stringify (<anonymous>)
    at eval (eval at cloneObject (vendor.js:1), <anonymous>:1:11)
    at cloneObject (util.js:15)
    at Module.createItemFromTemplate (web-experience-processor.js:66)
    at deploySolutionItems.js:497
    at ZoneDelegate.invoke (zone-evergreen.js:372)
    at Object.onInvoke (core.js:28535)
    at ZoneDelegate.invoke (zone-evergreen.js:371)
    at Zone.run (zone-evergreen.js:134)
    at zone-evergreen.js:1276

[MikeTschudi]

@chris-fox, this problem affects Solutions containing any of the types Web Experience, Hub Site Application, Hub Page, and probably StoryMap.

[chris-fox]

@dbouwman, this issue was reported by the QuickCapture team. It is not impacting our app, but seems to be specific to certain item types that are leveraging Hub.js in an Angular app.

[MikeTschudi]

@xiao8579, please update Quick Capture to solution.js 0.22.1

[xiao8579]

Thanks, @MikeTschudi and the team, will do!