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
Has been a little while since I last worked on an Angular but here are some tips.
npm install @sassoftware/va-report-components --save
"cli": {
"cache": {
"enabled": false
}
},
"assets": [
"src/assets"
],
<!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>
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);
}
}
}
<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
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?
Has been a little while since I last worked on an Angular but here are some tips.
npm install @sassoftware/va-report-components --save
"cli": {
"cache": {
"enabled": false
}
},
"assets": [
"src/assets"
],
<!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>
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);
}
}
}
<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
SAS Innovate 2025 is scheduled for May 6-9 in Orlando, FL. Sign up to be first to learn about the agenda and registration!
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.