nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting error while implementing the Graphic function in Angular

SahilBansal

Hi Team.

While implementing graphic function inside the component, it's giving below error:

Error: Type '{ type: string; size: string; color: string; outline: { color: string; width: string; }; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in type 'SymbolProperties'.

The application is running on the below-mentioned versions.

Angular version 11.2.7

typescript version 4.1.5

Could you please let me know if it's related to any version problem and If it is then is there any upgrade coming for this one shortly?

Thanks & Regards,

Sahil

Find more posts tagged with

Accepted answers

All comments

SahilBansal

Hi,

I have already created a new post for that new issue.

AndyGup

@SahilBansal for your second question about Routes, I recommend creating a new issue with a new Title since it's not related to the original question and Title. That way the question will get more visibility.

SahilBansal

Can you please help me in the above issue.

SahilBansal

Now I am trying to implement route and directions in my application but getting the following errors in the getRoute() functions.

Property 'routeResults' does not exist on type 'RouteResult'.

Type 'number[]' is missing the following properties from type 'Color': a, b, g, r, and 7 more.

Cannot assign to 'classList' because it is a read-only property.

This is the code snippet:

const getRoute = () => {

const routeParams = new RouteParameters({

stops: new FeatureSet({

features: view.graphics.toArray()

}),

returnDirections: true

});

this.routeTask.solve(routeParams)

.then((data) => {

data.routeResults.forEach((result: { route: Graphic; }) => {

result.route.symbol = {

type: 'simple-line',

color: [5, 150, 255],

width: 3

};

view.graphics.add(result.route);

});

if (data.routeResults.length > 0) {

const directions = document.createElement('ol');

directions.classList = 'esri-widget esri-widget--panel esri-directions__scroller';

directions.style.marginTop = '0';

directions.style.padding = '15px 15px 15px 30px';

const features = data.routeResults[0].directions.features;

features.forEach((result: { attributes: { text: string; length: number; }; }, i: any) => {

const direction = document.createElement('li');

direction.innerHTML = result.attributes.text + ' (' + result.attributes.length.toFixed(2) + ' miles)';

directions.appendChild(direction);

});

view.ui.empty('top-right');

view.ui.add(directions, 'top-right');

}

});

};

SahilBansal

It worked for me.

Moreover, I am using ES modules.

Thanks for your help!

AndyGup

I'm not sure about the sign-in issue, maybe check the permissions on your service.

I talked to a colleague. On the first issue of the Graphic not compiling, I missed the fact that you can't mix a Point with a LineSymbol, so getting a compiler error was valid. We recommending the following, and I verified this works on my machine:

import Point from '@arcgis/core/geometry/Point';
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
    
      const g = new Graphic ({
         geometry : new Point({
          //  type : 'point' ,   // autocasts as new Point()
           longitude :  - 71.2643 ,
           latitude :   42.0909
        }),
         symbol : new SimpleMarkerSymbol( {
          //  type : 'simple-line',
           size :   '12px' ,
           color :   'blue' ,
           outline :  {
             color :   '#efefef' ,
             width :   '1.5px'
          }
        })});

On your second issue, with the graphic not showing up that may be related to an issue that's fixed in 4.19, which is coming out in a few weeks. Try upgrading to the "next" version: https://github.com/Esri/feedback-js-api-next. How you are using the JS API (e.g. esri-loader, arcgis-webpack-plugin, ES modules)? I can provide an example of how to do that.

SahilBansal

But in the Vanilla javascript app, it's not letting me run the app because it's asking me to sign in and when I try to sign in, its says invalid credentials even though I put correct one only.

AndyGup

I recommend getting the code running outside of Angular in a vanilla JS app first. Can you provide a codepen that reproduces the issue?

SahilBansal

I tried this workaround and it is not giving any run time errors. but it's also not giving me any results in the output. It does not show me any graphic symbol with the properties I have defined in the graphic.

SahilBansal

I tried this workaround and it is not giving any run time errors. but it's not giving any results in the output.

AndyGup

Okay, I looked at the TypeScript definition file and there are typings missing, we'll look into that. Here's one example of a temporary workaround:

    graphic: new Graphic ({
         geometry : {
           type : 'point' ,   // autocasts as new Point()
           longitude :  - 71.2643 ,
           latitude :   42.0909
        } as __esri.Point,
         symbol :  {
           // <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/69004">@ts</a>-ignore
           type : 'simple-line',
           size :   '12px' ,
           color :   'blue' ,
           outline :  {
             color :   '#efefef' ,
             width :   '1.5px'
          }
        }});

[Edit: just a footnote, my suggestions are based on 4.18/4.19-next]

SahilBansal

Now it's giving me the below errors:

Argument of type '{ size: string; color: string; outline: { color: string; width: string; }; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.

Argument of type '{ color: string; outline: { color: string; width: string; }; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.

AndyGup

It looks like a typings issue related to auto-casting, we may have missed something. Try explicitly declaring the Symbol, don't forget to add the module reference to your require() statement:

symbol: new SimpleLineSymbol({
   size: '12px',
   color: 'blue',
   outline: {
      color: '#efefef',
      width: '1.5px'
]),

SahilBansal

First of all, Thanks for your reply!

PFB the code snippet.

const track = new Track({

view,

graphic: new Graphic({

geometry: {

type: 'point', // autocasts as new Point()

longitude: -71.2643,

latitude: 42.0909

symbol: {

type: 'simple-line',

size: '12px',

color: 'blue',

outline: {

color: '#efefef',

width: '1.5px'

}

}),

useHeadingEnabled: false

});

view.ui.add(track, 'top-left');

I am getting the error in the geometry as well as in the symbol type and I don't know why it is not showing the version of my Arcgis API key in my dashboard.

AndyGup

Hi Sahil, can you provide a code snippet that demonstrates the issue? And, which version of the JS API?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.