Hello, I am trying to evaluate if I can use Aspose.CAD in my Angular project to display DWG files. Unfortunately the available instructions are not sufficient.
Currently I have an Angular app version 18, but I have also tried 15 and 20.
I followed the instructions from
, but I always get the following error:
[ERROR] Top-level await is not available in the configured target environment ("chrome136.0", "edge136.0", "firefox128.0", "ios17.0", "safari17.0" + 7 overrides)
node_modules/aspose-cad/commonjs/index.js:279:0:
279 │ await (globalThis.__AsposeCadInit = function (global) {
╵ ~~~~~
is there anywhere a running example that I can look at?
Regards Michael
@michaelkroeschel
It seems that you are encountering an issue with using Aspose.CAD in your Angular project, specifically related to the top-level await feature not being available in your configured target environment. This is a common issue when the JavaScript environment does not support top-level await, which is necessary for initializing the Aspose.CAD library.
Here are some steps you can take to resolve this issue:
-
Ensure Compatibility: Make sure that your Angular project is configured to target a JavaScript version that supports top-level await. You can check your tsconfig.json file and set the target to ES2022 or later. This can be done as follows:
{
"compilerOptions": {
"target": "ES2022",
...
}
}
-
Modify the Initialization Code: If changing the target does not resolve the issue, you can modify the way you initialize the Aspose.CAD library. Instead of using top-level await, wrap your initialization code in an async function and call it within the lifecycle hook of your Angular component. Here’s an example of how you might adjust your code:
async ngOnInit() {
console.log("aspose-cad WASM loading...");
await this.initializeAsposeCad();
}
private async initializeAsposeCad() {
await dotnet.boot();
console.log("aspose-cad WASM has been loaded");
}
-
Follow the Example Provided in the Documentation: The Aspose documentation provides a sample Angular project setup that includes the necessary steps to integrate Aspose.CAD. Ensure you follow the example closely, including the installation of the library and the setup of the HTML and TypeScript files. Here’s a brief outline of the steps:
- Create a new Angular project using
ng new angular-example.
- Install the Aspose.CAD library with
npm install aspose-cad.
- Include the Aspose.CAD script in your
angular.json file under the scripts section.
- Implement the file upload and image conversion logic as shown in the documentation.
-
Check for Updates: Ensure that you are using the latest version of the Aspose.CAD library, as updates may include fixes for compatibility issues.
If you continue to experience issues, consider checking the Aspose forums or documentation for additional examples or troubleshooting tips.
For further reference, you can view the detailed guide on using Aspose.CAD in Angular here.
Sources:
[1]: How to use Aspose.CAD in Angular - Aspose Documentation
@michaelkroeschel,
Hi,
the example in documentation is supposed to be working. This issue seems to be an environment-related, please try to apply the advices above.
Thank you for your reply. I have gone through them and read some more. In addition, I have started again with a new Angular 18 application as described in the documentation. But I do not understand the call of dotnet.boot(); since I have only installed the script version of Aspose.CAD but do not use a web assembly. Am I making a mistake here, is it not possible?
your documentation does not mention dotnet.boot();
@michaelkroeschel,
Aspose.CAD is a webassembly using Aspose.CAD for .NET library under the hood, that’s why it should be run in that way. There is special ngOnInit() function in the point 6 of the initial manual above. Please try to apply the advices above to avoid the error.
Thank you for the clarification!
I include the dotnet.boot() in my code and i checkt the the Code in the Example. But the function
onFileSelected is loading an PNG image creating a local URL from it and adding this as href in a tag.
My Problem is, that I have to render a .dwg File and as sone a add the following code:
AsposeCAD.Image.load(uint8Array).then((drawing: any) => {
drawing.render(canvas);
}).catch((error: Error) => {
console.error('Error loading the DWG-File:', error);
});
I’m getting the Error:
Top-level await is not available in the configured target environment ("chrome136.0", "edge136.0", "firefox128.0", "ios17.0", "safari17.0" + 7 overrides)
node_modules/aspose-cad/commonjs/index.js:279:0:
279 │ await (globalThis.__AsposeCadInit = function (global) {
╵ ~~~~~
I need an example how I can use the 3D rendering for DWG Files in the Browser.
Thanks for helping
here my complete code for loading the dwg file
loadDWG() {
const filePath = 'assets/sample.dwg';
const canvas = document.getElementById('cadViewer') as HTMLCanvasElement;
this.loadFileAsUint8Array(filePath).then((arrayBuffer) => {
const uint8Array = new Uint8Array(arrayBuffer);
AsposeCAD.Image.load(uint8Array).then((drawing: any) => {
drawing.render(canvas);
}).catch((error: Error) => {
console.error('Error loading the DWG-File:', error);
});
}).catch((error: Error) => {
console.error('Error loading Uint8Array:', error);
});
}
loadFileAsUint8Array(filePath: string): Promise<ArrayBuffer> {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', filePath, true);
xhr.responseType = 'arraybuffer';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error(`Error loading File: ${xhr.statusText}`));
}
};
xhr.onerror = () => {
reject(new Error('Error'));
};
xhr.send();
});
}
@michaelkroeschel,
We have tested our example from docs and can confirm that it works as described (except of Image.save/Image.load corrections instead of Image.Save/Image.Load respectively). As per “Top-level await is not available” error please verify “target”: “ES2022” in “compilerOptions” inside tsconfig.json. It is not clear exactly what is “drawing.render()” suppose to do, but you need to convert DWG stream to other format which is suitable for canvas (e.g., some raster-based format). To do this with Aspose.CAD you need to call .save and export the initial DWG to PNG, JPG (like in our example) or some other suitable format.
We have also noticed that this version (23.1.2) of Aspose.CAD product is outdated, we will discuss and consider possible update of it. Please take into account also, that the support of 3D in DXF/DWG is limited even for the recent versions of Aspose.CAD for .NET and Java (25.5).
Files that could be helpful are attached.
Files.zip (7.3 KB)