Solved: Hosting Viya report package in an Angular application

Pim2 · Posted 08-22-2024 10:51 AM

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

FalkoSchulz · Posted 08-26-2024 08:40 PM

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>
    <!-- Container for the SAS Report -->
    <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

View solution in original post

Pim2 · Posted 08-26-2024 02:42 AM

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?

FalkoSchulz · Posted 08-26-2024 08:40 PM

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>
    <!-- Container for the SAS Report -->
    <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

Pim2 · Posted 08-27-2024 03:30 AM

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

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

Re: Hosting Viya report package in an Angular application

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

Re: Hosting Viya report package in an Angular application

2025 SAS Hackathon: There is still time!