Getting error while implementing the Graphic function in Angular

1047
15
04-09-2021 07:40 AM
SahilBansal
New Contributor II

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

 

0 Kudos
15 Replies
AndyGup
Esri Regular Contributor

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

0 Kudos
SahilBansal
New Contributor II
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.
0 Kudos
AndyGup
Esri Regular Contributor

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'
]),

 

0 Kudos
SahilBansal
New Contributor II

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'.

0 Kudos
AndyGup
Esri Regular Contributor

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 :  {
           // @ts-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]

0 Kudos
SahilBansal
New Contributor II

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

0 Kudos
SahilBansal
New Contributor II

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.

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos
SahilBansal
New Contributor II

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.

0 Kudos