Unhandled Promise rejection

I am reporting an issue with

• TypeScript definitions
• [X ] another resource in this repository

Using angular 11, after upgrading to 4.19 api, we are seeing the Unhandled Promise rejection error:

The only changes to cause this error was updating arcgis-js-api esri-loader and @types/arcgis-js-api.

I have compared the provided angular.json, and package.json, as well as tsconfig.json values to what we have in our app. The only difference seems to be we are looking to use angular 11 vs 12.

Can anyone please provide suggestions to figure out what the issue is? And how to get around it? I attempted to do a support ticket, but they would not assist without a vanilla html file, which is not going to work for this problem. We do not want to go to angular 12 at this time. We were hoping to move to ES modules with 4.19, but wont be able to do so if we cannot get past this error.

Thank you, Roy

tsconfig.json { "compileOnSave": false, "compilerOptions": { "module": "es2020", "outDir": "./dist/out-tsc", "strictNullChecks": true, "noImplicitAny": false, "noImplicitThis": true, "alwaysStrict": false, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noUnusedLocals": true, "skipLibCheck": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "allowJs": true, "resolveJsonModule": true, "esModuleInterop": true, "target": "es2017", "types": [ "node", "arcgis-js-api", "jest", "jest-extended" ], "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom", "esnext.asynciterable" ], "baseUrl": "./", "paths": { "core-js/es6/*": [ "node_modules/core-js/es/*" ], "core-js/es7/reflect": [ "node_modules/core-js/proposals/reflect-metadata" ], "@core/*": [ "src/app/core/*" ], "@shared/*": [ "src/app/shared/*" ], "@feature/*": [ "src/app/feature/*" ], "@test/*": [ "src/test/*" ], "@/*": [ "src/*" ] } }, "exclude": [ "**/node_modules/*", "**/dist/*" ] }

angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "gc-maps-frontend": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "style": "scss", "spec": false }, "@schematics/angular:service": { "spec": false } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "allowedCommonJsDependencies": [ "lodash", "hammerjs", "redux-devtools-extension", "redux-observable-es6-compat", "file-saver", "js-sha256", "moment" ], "aot": true, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/env.js", "src/env.dev.js", "src/env.test.js", "src/env.staging.js", "src/env.prod.js", "src/silent-refresh.html" ], "styles": [ "node_modules/font-awesome/css/font-awesome.css", "src/styles.scss" ], "scripts": [], "serviceWorker": true, "stylePreprocessorOptions": { "includePaths": [ "./src" ] } }, "configurations": { "local": { "budgets": [{ "type": "anyComponentStyle", "maximumWarning": "7kb" }] }, "dev": { "budgets": [{ "type": "anyComponentStyle", "maximumWarning": "7kb" }], "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false, "serviceWorker": true }, "test": { "budgets": [{ "type": "anyComponentStyle", "maximumWarning": "7kb" }], "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false, "serviceWorker": true }, "staging": { "budgets": [{ "type": "anyComponentStyle", "maximumWarning": "7kb" }], "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.staging.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "serviceWorker": true }, "production": { "budgets": [{ "type": "anyComponentStyle", "maximumWarning": "7kb" }], "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "serviceWorker": true } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "gc-maps-frontend:build", "sslKey": ".ssl-keys/server.key", "sslCert": ".ssl-keys/server.crt", "ssl": false }, "configurations": { "local": { "browserTarget": "gc-maps-frontend:build:local" }, "dev": { "browserTarget": "gc-maps-frontend:build:dev" }, "test": { "browserTarget": "gc-maps-frontend:build:test" }, "staging": { "browserTarget": "gc-maps-frontend:build:staging" }, "production": { "browserTarget": "gc-maps-frontend:build:prod" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "gc-maps-frontend:build" } }, "test": { "builder": "@angular-builders/jest:run", "options": { "tsConfig": "src/tsconfig.spec.json", "no-cache": true, "polyfills": "src/polyfills.ts", "configPath": "./jest.config.js", "styles": [ "node_modules/font-awesome/css/font-awesome.css", "src/styles.scss" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/env.js", "src/env.dev.js", "src/env.test.js", "src/env.staging.js", "src/env.prod.js", "src/silent-refresh.html" ], "stylePreprocessorOptions": { "includePaths": [ "src" ] } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "gc-maps-frontend-e2e": { "root": "e2e/", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "gc-maps-frontend:serve" }, "configurations": { "production": { "devServerTarget": "gc-maps-frontend:serve:prod" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "gc-maps-frontend", "schematics": { "@schematics/angular:component": { "style": "scss" } } }

package.json: { "name": "gc-maps-frontend", "version": "1.1.0", "author": "GeoComm Inc.", "private": true, "repository": { "url": "https://github.com/Geo-Comm/gc-maps-frontend" }, "scripts": { "ng": "ng", "start": "ng serve", "host-local": "ng serve --host=0.0.0.0", "build": "ng build --prod", "deploy-dev": "./serverless/bin/deploy_static_files.sh dev", "jest:clear": "jest --clearCache", "test": "ng test gc-maps-frontend --watch=false > test-coverage.txt", "test:update": "ng test gc-maps-frontend --coverage --watch=false -u", "test:changed": "ng test gc-maps-frontend --onlyChanged", "test:watch": "ng test gc-maps-frontend --watch=true", "test:coverage": "ng test gc-maps-frontend --coverage", "test:ci": "ng test gc-maps-frontend --coverage --watch=false", "test:band": "ng test gc-maps-frontend --runInBand", "reset-e2e": "rm package-lock.json; npm uninstall protractor; npm install protractor --save-dev; npm run webdriver-update-local", "webdriver-update-local": "node e2e/chromedriver-version-matcher.js", "webdriver-update-ci": "webdriver-manager update --standalone false --gecko false --versions.chrome 75.0.3770.90", "e2e-ci": "ng e2e --no-webdriver-update --protractor-config=e2e/protractor-ci.conf.js", "lint": "ng lint", "e2e": "ng e2e --no-webdriver-update", "dev": "ng serve --proxy-config proxy.conf.json --port 4200 --configuration=dev", "testqa": "ng serve --proxy-config proxy.conf.json --port 4200 --configuration=test", "staging": "ng serve --proxy-config proxy.conf.json --port 4200 --configuration=staging", "prod": "ng serve --proxy-config proxy.conf.json --port 4200 --prod", "json-server": "json-server --watch src/db-mock.json --id id", "http-server": "angular-http-server --path dist --cors -p 4200 --configuration=prod", "http-server-ssl": "angular-http-server --path dist --cors -p 4200 --https --configuration=prod --ssl true --ssl-cert 'ssl/server.crt' --ssl-key 'ssl/server.key'", "postinstall": "ngcc" }, "jest": { "preset": "jest-preset-angular", "setupFilesAfterEnv": [ "jest-extended", "<rootDir>/src/setup-jest.ts" ] }, "dependencies": { "@angular-redux/form": "10.0.0", "@angular-redux/router": "10.0.0", "@angular-redux/store": "10.0.0", "@angular/animations": "11.2.8", "@angular/common": "11.2.8", "@angular/compiler": "11.2.8", "@angular/core": "11.2.8", "@angular/forms": "11.2.8", "@angular/localize": "11.2.8", "@angular/platform-browser": "11.2.8", "@angular/platform-browser-dynamic": "11.2.8", "@angular/router": "11.2.8", "@angular/service-worker": "11.2.8", "@esri/arcgis-to-geojson-utils": "^1.3.0", "@ng-bootstrap/ng-bootstrap": "8.0.4", "angular-oauth2-oidc": "10.0.3", "arcgis-js-api": "4.19.2", "bootstrap": "4.5.3", "core-js": "3.6.5", "dayjs": "^1.10.5", "dayjs-plugin-utc": "^0.1.2", "esri-loader": "3.1.0", "file-saver": "^2.0.2", "font-awesome": "4.7.0", "gl-matrix": "^3.3.0", "hammerjs": "2.0.8", "lodash": "^4.17.21", "moment": "2.29.1", "ngx-clipboard": "^14.0.1", "ngx-mask": "10.0.4", "ngx-toastr": "^13.2.0", "redux": "4.0.5", "redux-catch": "1.3.1", "redux-logger": "3.0.6", "redux-observable-es6-compat": "1.2.1", "reselect": "^4.0.0", "rxjs": "6.6.3", "zone.js": "^0.11.4" }, "devDependencies": { "@angular-builders/jest": "10.0.1", "@angular-devkit/build-angular": "^0.1102.7", "@angular-devkit/schematics": "^11.2.7", "@angular/cli": "11.2.7", "@angular/compiler-cli": "11.2.8", "@angular/language-service": "11.2.8", "@fortawesome/fontawesome-pro": "5.15.1", "@ngneat/spectator": "^6.0.0", "@schematics/angular": "^10.2.0", "@types/arcgis-js-api": "4.19.0", "@types/file-saver": "^2.0.1", "@types/gl-matrix": "^3.2.0", "@types/jasmine": "^3.6.0", "@types/jasminewd2": "2.0.8", "@types/jest": "^26.0.15", "@types/moment": "2.13.0", "@types/node": "^14.14.5", "@types/redux-logger": "3.0.8", "aws-sdk": "^2.778.0", "canvas": "^2.6.1", "chromedriver": "86.0.0", "chromedriver-version-matcher": "1.1.4", "codelyzer": "^6.0.0", "cypress": "^7.5.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "jest": "^26.0.0", "jest-extended": "0.11.5", "jest-module-name-mapper": "0.1.5", "jest-preset-angular": "^8.3.2", "jest-sonar-reporter": "^2.0.0", "json-server": "^0.16.2", "mockdate": "3.0.2", "ng-mocks": "^10.4.0", "protractor": "7.0.0", "protractor-image-comparison": "3.9.0", "puppeteer": "5.4.1", "redux-devtools-extension": "2.13.8", "serverless": "^2.48.0", "serverless-cf-vars": "^0.3.4", "serverless-offline": "^6.7.0", "serverless-plugin-tracing": "2.0.0", "ts-node": "^9.0.0", "tsconfig-paths-jest": "0.0.1", "tslint": "~6.1.3", "typescript": "4.0.3" }, "optionalDependencies": { "fsevents": "^2.1.2" } }

[devilsgeographer]

Thank you for the replies. I did try the @next build, also with arcgis/core next version, which did not help. Also tried angular 12 vs 11. After that, and thinking about what functionality was broken after the update, I determined that there could be a breaking change somewhere inside of GeoJSONLayer. In the code we are asking to queryFeatureCount, it never resolves the promise there or throws an exception, and we get that console error. I am going to return to my support case and see if I can make a reproducible example html there. Thanks again I’ll circle back if that isn’t the issue.

[andygup]

Also, if you are using esri-loader try setting next using this pattern:

import { setDefaultOptions } from 'esri-loader';


setDefaultOptions({ version: 'next' });