Community

Can't view map in Angular 12.2.8

2212
6
03-28-2022 07:21 AM
FranAcuñaParra
by
New Contributor II
‎03-28-2022 07:21 AM

Hi team,

I'm trying to display a map in an Angular app as a component. I'm struggling to make it work because the map doesn't appear never. The code It's quite simple becacause I'm following the example of this repository: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli using ES modules.

My package.json is this:

 

 

 

{
  "name": "siginter4clientweb-front",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "pwa-asset-generator": "pwa-asset-generator -c -f src/assets/images/app-icon.png src/assets/images"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.8",
    "@angular/common": "~12.2.8",
    "@angular/compiler": "~12.2.8",
    "@angular/core": "~12.2.8",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "~12.2.8",
    "@angular/material": "^12.2.8",
    "@angular/platform-browser": "~12.2.8",
    "@angular/platform-browser-dynamic": "~12.2.8",
    "@angular/router": "~12.2.8",
    "@angular/service-worker": "~12.2.8",
    "@arcgis/core": "^4.23.1",
    "@jccm/marco": "^2.0.0-alpha.43",
    "@ngneat/transloco": "^2.22.0",
    "keycloak-angular": "^8.3.0",
    "keycloak-js": "^10.0.2",
    "ngx-avatar": "^4.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "xstate": "^4.23.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.7",
    "@angular/cdk": "^12.2.8",
    "@angular/cli": "~12.2.7",
    "@angular/compiler-cli": "~12.2.8",
    "@cypress/schematic": "^1.5.0",
    "@types/arcgis-js-api": "^4.23.0",
    "@types/node": "^12.11.1",
    "cypress": "8.3.1",
    "cypress-plugin-snapshots": "^1.4.4",
    "pwa-asset-generator": "^4.3.9",
    "typescript": "~4.3.5"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

 

Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "siginter4clientweb": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "node_modules/@jccm/marco/src/lib/assets/html/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "sass",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "*",
                "input": "node_modules/@arcgis/core/assets/esri/themes/light",
                "output": ""
              },
              {
                "glob": "*",
                "input": "node_modules/@jccm/marco/src/lib/assets/html",
                "output": ""
              },
              "src/manifest.webmanifest"
            ],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": ["keycloak-js"],
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1500kb",
                  "maximumError": "2000kb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "siginter4clientweb:build:production"
            },
            "development": {
              "browserTarget": "siginter4clientweb:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "cypress-run": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "siginter4clientweb:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "siginter4clientweb:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "watch": true,
            "headless": false
          }
        },
        "e2e": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "siginter4clientweb:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "siginter4clientweb:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "siginter4clientweb"
}

 

tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
0 Kudos
6 Replies
AndyGup
by Esri Regular Contributor
Esri Regular Contributor
‎03-28-2022 09:06 AM

HI @FranAcuñaParra can you provide a simple example that reproduces your issue in github, codesandbox or stackblitz?

0 Kudos
FranAcuñaParra
by
New Contributor II
‎03-28-2022 10:53 AM

Hi @AndyGup yes, of course. I'm preparing an example on Github to show you the issue. In the mean time, I thought the error was because of the Angular version, but I've downloaded the Esri example from the repo (https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli) and downgrade the Angular version to 12.2.8 (the one I've to use) and it renders the map fine. Then, in the component of my app I commented this line: 

@import 'https://js.arcgis.com/4.23/@arcgis/core/assets/esri/themes/light/main.css';

And the map showed up but it moves or pan by itself. Does it make sense?

 

I also have attached the browser console logs where there are several warnings (the version mismatch warnings about assets also appear in the Esri example).

 

Thanks in advance. Any help will be appreciated.

Preview file
265 KB
0 Kudos
AndyGup
by Esri Regular Contributor
Esri Regular Contributor
‎03-28-2022 12:31 PM

The behavior you are describing about the map panning itself is expected if the CSS isn't loaded or didn't load correctly due to a component life-cycle issue.  If you comment out the main.css then then map won't work correctly.

With regards to the version mismatch warnings, those will be resolved in a few days. They are showing up temporarily because we are in the process of releasing patches for 4.23, which just came out last week: https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-ja... 

0 Kudos
FranAcuñaParra
by
New Contributor II
‎03-28-2022 02:45 PM

OK @AndyGup , thanks for your reply.

Now in the css file of my  map component I have uncommented the main.css and the map doesn't show up. The .ts file of the component is the same the Esri repo example and the Promise never gets resolved I don't know why. Maybe there is something wrong with the assets config...

 

 

ngOnInit(): any {
    // Initialize MapView and return an instance of MapView
    this.initializeMap().then(() => {
      // The map isn't initialized and never enters here
        console.log('The map is ready.');
    });
  }

 

 

 

Is there any rule about style sheet extension? Can it be .scss, .sass or css?

I've tried to make a Github repo with the full app in order you can installed but then I realized that is not going to work because I am working with my client npm artifactory, and to make it work it is necesary VPN credentials. Despite of, below I've attached a link to a Github repo with the code of the app with only one module with Map Component inside.

 

Thanks in advance.

 

https://github.com/fjacupar/EsriJs-Angular12

0 Kudos
AndyGup
by Esri Regular Contributor
Esri Regular Contributor
‎03-28-2022 04:00 PM

@FranAcuñaParraI took a quick look at the repo, thanks. Since, there's nothing obvious within the map component, this is most likely an issue with CSS inheritance and not an issue with the ArcGIS JS API. My guess is you'll need to do some Angular component CSS debugging in the developer tools and see what's being inherited and what's being overridden. Have you tried setting the @arcgis/core CSS in the "Parent" component? 

There aren't any rules about style sheet extensions. And, there shouldn't be any conflicts with @arcgis/core/assets and Angular, however if you do get an error we'd like to know about it.

0 Kudos
FranAcuñaParra
by
New Contributor II
‎04-08-2022 07:01 AM

Hi @AndyGup. At the end, I could resolve this issue. The problem was that the CSS component library I was using (Angular Material) was somehow overriding Map CSS styles.

Thank you very much for your attention!

0 Kudos