BookmarkSubscribeRSS Feed
☑ This topic is solved. Need further help from the community? Please sign in and ask a new question.
Pim2
Calcite | Level 5

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:

Pim2_0-1724338009154.png

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:

Pim2_1-1724338176112.png

 

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

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
FalkoSchulz
SAS Employee

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

 

  1. 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
  2. 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
      }
    },​
  3. 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.
  4. 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.
  5. Register the assets folder as such static source folder in your angular.json file (projects/architect/build/options):
    "assets": [
      "src/assets"
    ],​
  6. 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>​
  7. 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:
  8. 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);
        }
      }
    }​
  9. 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

3 REPLIES 3
Pim2
Calcite | Level 5

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

Pim2_0-1724654217475.png

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

Pim2_1-1724654304013.png

 

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

Pim2_2-1724654511204.png

 

Anyone?

FalkoSchulz
SAS Employee

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

 

  1. 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
  2. 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
      }
    },​
  3. 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.
  4. 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.
  5. Register the assets folder as such static source folder in your angular.json file (projects/architect/build/options):
    "assets": [
      "src/assets"
    ],​
  6. 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>​
  7. 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:
  8. 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);
        }
      }
    }​
  9. 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
Calcite | Level 5
I think I missed the cache-setting. I got it to work on my local machine now. Thanks!

SAS Innovate 2025: Save the Date

 SAS Innovate 2025 is scheduled for May 6-9 in Orlando, FL. Sign up to be first to learn about the agenda and registration!

Save the date!

Tips for filtering data sources in SAS Visual Analytics

See how to use one filter for multiple data sources by mapping your data from SAS’ Alexandria McCall.

Find more tutorials on the SAS Users YouTube channel.

Discussion stats
  • 3 replies
  • 851 views
  • 0 likes
  • 2 in conversation