How do i setup tsconfig.json and tsconfig.app.json of an Angular app using 'forma-embedded-view-sdk/auto'

How do i setup tsconfig.json and tsconfig.app.json of an Angular app using 'forma-embedded-view-sdk/auto'

iklimis
Advocate Advocate
1,495 Views
4 Replies
Message 1 of 5

How do i setup tsconfig.json and tsconfig.app.json of an Angular app using 'forma-embedded-view-sdk/auto'

iklimis
Advocate
Advocate

Hi 
I trying to build a forma extension using Angular 16 and the  "forma-embedded-view-sdk" library.

I am running in a lot of issues regarding the tsconfig setup. 
Is there a working example of an Angular app that uses the library with correct import and correct tsconfig setup 

It would be tremendous help

 

0 Likes
Accepted solutions (1)
1,496 Views
4 Replies
Replies (4)
Message 2 of 5

henrik_steenJL382
Autodesk
Autodesk

Hello!

 

The current package is distributed as a EcmaScript Module (ESM) with multiple package entry points.

 

In order for TypeScript to load this you need to set "moduleResolution" to "Node16" or "NodeNext", as well as switching your code to ESM by setting "type" to "module" in your package.json.

 

More details here:

https://www.typescriptlang.org/docs/handbook/esm-node.html
https://www.typescriptlang.org/tsconfig#moduleResolution

 

Note that when writing ESM modules you need to include the (final, e.g. .js) file extension in imports from your own project, so you'll likely get lots of errors until you've done that too.

 

Hope this helps!

Message 3 of 5

iklimis
Advocate
Advocate

Hello  henrik_steenJL382!

thanks for your reply 


I have already added "type": "module" in package.json and also used "moduleResolution": "NodeNext" in compilerOptions. Although the forma-sdk is now imported without errors there problem now is that (although my code compiles) I get errors like the following which is basic import statements in a typical angular module/component . 
My imports now seem not to be recognized.

Also could you elaborate on how to add the extension in I presume angular.json?

0 Likes
Message 4 of 5

henrik_steenJL382
Autodesk
Autodesk
Accepted solution

The error you are showing is the missing file extension names in the import path. You'll have to add ".js". But it seems that using ESM entirely with Angular is not stable yet, so you might see some errors on various cases (like the local server). See https://angular.io/guide/esbuild for details.

 

We've modified our forma-embedded-view-sdk package so you should now be able to install it without modifying your moduleResolution or setting type=module. Please try it out instead (minimum version of forma-embedded-view-sdk must be 0.14.1) and let us know if this solves your problems.

 

Henrik

Message 5 of 5

iklimis
Advocate
Advocate

Thank you very much! Works great now!