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

[AndyGup]

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

[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]

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]

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]

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]

[SahilBansal]

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

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

[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]

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.