Itwin Angular Viewer API exception

[Saminathan2005]

Hi

I am trying to load the angular itwin viewer application .I followed the below steps.

1. Registered the app and given Client id ,iTwinId,iModelId and scope as " scope: "imodelaccess:read imodels:read realitydata:read".
2. Registered the call back and running on localhost:3000
3. Trying to launch the angular application but getting the api error "400 Bad Request".

Url : https://ims.bentley.com/connect/authorize?client_id=spa-hUwaOkreQ1SCQRNYdbYbKH0TP&redirect_uri=http%3A%2F%2Flocalhost%3A3000&response_type=code&scope=imodelaccess%3Aread%20imodels%3Aread%20realitydata%3Aread&state=a6f98da8f2894484b5e4dd3c0d6a245d&code_challenge=2QPcVPwe7lymWUhVigvTF9aEFu5o5pZ-FQ43lH4mFBs&code_challenge_method=S256&response_mode=query

[ben-polinsky]

Hello.

Are you referring to https://github.com/iTwin/viewer-sample-angular?

[Saminathan2005]

Yes. i referred the same and downloaded into my local. when i browser localhost:4200 getting the above exception from api

[ben-polinsky]

Indeed. Try using itwin-platform as the scope in your app registration and code. https://developer.bentley.com/itwin-platform-scope-introduction/

If that doesn't work, I'll fire up the app and take a look.

[Saminathan2005]

Thanks for your update. I have updated the scope in environment.local.ts as " scope: "itwin-platform". Still i am getting the error.I couldnt find the place to update the scope details on app registration page. I can see the below information on application registration page.(https://developer.bentley.com/apps) .Please let me know how to proceed further. Our use case is

1. Load the viewer in angular app
2. Update the elements for the created model.

If any running angular application for the above use cases (sandbox) that will be use full for us and we can go ahead for purchase.

[ben-polinsky]

Scope looks okay in your app registration.

I do see that your redirect URI is https://www.google.com/. This should point to your local app so the auth process can complete. From the Url you provided in your initial post, I see you have it set to http://localhost:3000 in your application environment. I would try clicking "edit details" on your app registration page (pictured above), remove the google redirect URI, and add http://localhost:3000 instead.

In the meantime, I'll try to run this Angular example and see if I can properly authenticate.

Could you clarify what you mean by "update the elements for the created model?"

Thanks

[Saminathan2005]

Thanks for the update. When i provide "http://localhost:3000/" url also i am getting the same error. The additional information what i can see is when i browse localhost:3000 i can see the similar error (atttached below)

update the elements for the created model : Our expectation is to load the viewer lets say its two floor building first .Then we want to update each floor with different color. lets say First floor want to update with "Yellow" that denotes - In progress and Second floor want to update with - Green which denotes Completed

if we get the running angular project with above use case (stackblitz or sandbox) that will be helpfull.

[ben-polinsky]

I've been able to authenticate fine using the angular sample. Accessing an iModel is still in progress, but that's step two. Working on an online replication but dealing with some issues. Some ideas:

1. Have you tried from a private browser session?
2. Is there any other error messaging available? Perhaps in the console or in the Response tab.
3. I understand you're using angular, but for comparison are you able to authenticate with our react web viewer template? Readme is here: https://github.com/iTwin/viewer/tree/master/packages/templates/cra-template-web-viewer

[Saminathan2005]

Hi Thanks for the update. I tried in private browser (incognito mode) even i am getting the 400 error (given below) and no error messages in console

i have tried with react and in react also same error.Is any way we can connect and diagnoise the issue. or you can share your email id so that i can ship my code for your analysis.

(https://ims.bentley.com/connect/authorize?client_id=spa-hUwaOkreQ1SCQRNYdbYbKH0TP&redirect_uri=http://localhost:3000&response_type=code&scope=itwin-platform&state=30e1c112d68e47fc9d231a95b9b8c1ba&code_challenge=ivQ0-72C6wmx1pqbPLW9vJps3kgVJttzPEoeCKkG9zk&code_challenge_method=S256&response_mode=query)

[ben-polinsky]

Hi,

Indeed. It's against our company policy to share emails on GH, but if you send yours over then I'm happy to reach out. You could also push your code to a repo (could grant me access to private repo if you don't want it public) and I'd take a look.

[ben-polinsky]

The issue with auth is a missing trailing forward slash in your environment.local.ts:

This works:

redirectUri: "http://localhost:3000/",
postSignoutRedirectUri: "http://localhost:3000/",

This does not:

redirectUri: "http://localhost:3000",
postSignoutRedirectUri: "http://localhost:3000",

The next step is getting the imodel api request to succeed. I'll continue to look into why this is failing today. As you can see from the last commit date of the sample, we haven't continued to support Angular, but I am happy to help figure this out and get you started.

[ben-polinsky]

Check out the https://github.com/iTwin/viewer-sample-angular/tree/4.x-quick-and-dirty branch I just pushed. I was able to authenticate and successfully view an iModel. I had to clear my browser storage/cookies to get auth to work. Otherwise, no issues.

[Saminathan2005]

Perfect.!!.Authentication working smooth . Thanks for the great support . Can you please let me know how we can update the elements as well. so that i can say we are good to go for purchase.

[ben-polinsky]

Great.

You'll need to know how to query each set of elements within each floor in your model so you can assign them each a different color.

Here's an example that colors floors: https://www.itwinjs.org/sandboxes/iTwinPlatform/Volume%20Query. Of particular interest to you is the VolumeQueryApi.ts file:

• in the VolumeQueryApi.getSpatialElements function you'll find an ECSQL query to retrieve elements from the iModel. You'll use a different query to get elements that comprise your model's floors, but the general process is the same.
• in the VolumeQueryApi.colorClassifiedElements function. This utilizes the EmphasizeElementsApi to change the appearance of a set of elements.

Not exactly sure what you have in mind for adding labels to each floor, but you'll probably want to checkout View Decorators

[Saminathan2005]

Thanks for sharing. Do you have similar example in angular ? which will be very help full.

[ben-polinsky]

No problem. Unfortunately, we're not really offering support for Angular right now. I personally haven't worked with Angular in 7-10 years. I can offer a bit of general help:

• You can remove any uiProviders, any packages prefixed with @itwin/appui-, and of course any packages with react in them. Those all deal with the application UI outside of the viewer.

• The VolumeQueryApi.ts files in the example is UI-agnostic.

If there's a specific place you're having trouble, I can try to help a bit more.

[Saminathan2005]

Hi

I am struck of getting colors and applying into the elments.Enclosed the sample project what i am trying. I created Volume.logger.query.api.ts.I want to get elements and apply the color in viewer.component.ts.

But getting the error while building the project and i am not sure how to correct that .

Enclosed the attached source code where i am facing the errror.

src.zip

Sample errrors : node_modules/@itwin/itwinui-react/cjs/utils/functions/polymorphic.d.ts:20:104 - error TS1109: Expression expected.

20 export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base>; }; ~

Error: node_modules/@itwin/itwinui-react/cjs/utils/functions/polymorphic.d.ts:20:106 - error TS1128: Declaration or statement expected.

20 export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base>; }; ~

[Saminathan2005]

Hi @ben-polinsky Any updates on this?

[ben-polinsky]

Hi - looks like you're importing @itwin/presentation-components which relies on React. You probably don't need to use the presentation libraries for a proof of concept - they're great for displaying formatted user-ready data. But you can query the 'raw-data' through createQueryReader.

I'd remove that library from your code and package.json and see how it goes.

[ben-polinsky]

To be clear, @itwin/presentation-frontend and @itwin/presentation-common are fine to use - they don't depend on React.

[Saminathan2005]

Thanks for the update. Still we are struggling to get the colors and update the colors in angular src. if you provide some angular example that will be helpfull. Thanks in advance.

[ben-polinsky]

As I mentioned before, we don't have the bandwidth to help with Angular applications. If there's a question related to the iTwin.js library itself, I'd be happy to continue helping.