Hosting Viya report package in an Angular application

Pim2 — Thu, 22 Aug 2024 14:51:55 GMT

Hi,

I'm trying to integrate a reportpackage within my angular application.

With the instructions from this page https://developer.sas.com/sdk/va/docs/guides/esm I create a page and imported the `@sassoftware/va-report-components` package. After that I added a report element on an empty page:

the report-package is unzipped in the ./report map.

I get nothing visual on my page, but I do get the following errors in de browser-console:

When I host the report-package directly in IIS and use the provided index.html the report does work as expacted.

What am I doing wrong?

And how should I integrate this report in Angular?

Thanks in advance.

Kind regards

Pim

Re: Hosting Viya report package in an Angular application

Pim2 — Mon, 26 Aug 2024 06:42:03 GMT

I managed to get to the next step. I had to include this in my header:

After that the <sas-report> tag is reconised:

but the report is still not loaded. I get different errors:

Anyone?

Re: Hosting Viya report package in an Angular application

FalkoSchulz — Tue, 27 Aug 2024 00:40:29 GMT

Has been a little while since I last worked on an Angular but here are some tips.

Install the report components modules if not done already in your project. Use the --save option to update your package.json:
```
npm install @sassoftware/va-report-components --save
```
Make sure to disable the cache for your project - I remember having difficulties serving .js files from the SDK module otherwise. You can switch off the cache in angular.json via:
"cli": { "cache": { "enabled": false } },
Best to serve static files via a local assets folder instead of importing modules. This makes referencing the modules in index.html easier. I believe this is related to the lack of configuration options of the underlying vite server. I simply copied all files from node_modules/@sassoftware/va-report-components/dist to the assets folder, e.g. assets/sdk-assets.
Extract your report package content also into the assets folder. For instance create a sub folder reports and have all reports hosted there. The same applies here - we want the report package to be hosted statically.
Register the assets folder as such static source folder in your angular.json file (projects/architect/build/options):
"assets": [ "src/assets" ],
Add related references to those scripts in your index.html and don't forget to add the <DIV/> container to the body for the SAS report:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>MyAngularProject</title> <base href="/" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <script src="assets/sdk-assets/dist/umd/va-report-components.js"></script> <link rel="stylesheet" href="assets/sdk-assets/dist/umd/style.css" /> </head> <body> <app-root></app-root>  <div id="sas-report-container"></div> </body> </html>
Define the SDK element via CUSTOM_ELEMENTS_SCHEMA since won't compile otherwise (assuming you are using TypeScript?). An example of defining the SASReportPageElement would be the following:
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { SASReportPageElement } from '@sassoftware/va-report-components'; @Component({ selector: 'app-home', standalone: true, imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './home.component.html', styleUrl: './home.component.css', }) export class HomeComponent implements OnInit { ngOnInit() { // Ensure the custom element is defined if (!customElements.get('sas-report-page')) { customElements.define('sas-report-page', SASReportPageElement); } } }
Once done - you can reference the element in your template .html as normal. Adjust the packageUri to point to your report package in the assets folder:
<p>home works!</p> <sas-report-page packageUri="../../assets/reports/MyReportPackage" pageName="vi92" style="width: 600px; height: 300px" ></sas-report-page>

I'm also seeing some translation error I18N messages in the console in my quick test program here - but this doesn't seem to cause any harm. Assuming some of the non-EN resource packages aren't available. This may need more tweaks for the underlying webpack config.

If you see a console message " ../reportPackage.xml 404 not found" - verify the packageUri attribute and make sure that is referencing the correct location of your report package.

Hope this helps. Falko

Re: Hosting Viya report package in an Angular application

Pim2 — Tue, 27 Aug 2024 07:30:13 GMT

I think I missed the cache-setting. I got it to work on my local machine now. Thanks!

topic Hosting Viya report package in an Angular application in SAS Visual Analytics

Hosting Viya report package in an Angular application

Re: Hosting Viya report package in an Angular application

Re: Hosting Viya report package in an Angular application

Re: Hosting Viya report package in an Angular application