Preparing the app
Starting from an existing Angular application, the rendering of a Pentaho dashboard has as prerequisite to prepare it properly with some initial steps. Each step has a precise goal and it is introduced below and detailed in the following paragraphs.
- Adding the dependency.
- Setting the proxy.
- Including the JS script.
- Importing the
PentahoDashboardModule
. - Installing the package.
If you don't have an existing Angular app, you can easily create a new one following the tutorial in the Appendix named Creating a new app. Once done, or if you already have an Angular app, in the following paragraphs you can find the step-by-step description of the task to complete.
1. Adding the dependency
The very first step to do is about adding the dependency to the pentaho-dashboard
npm package. To complete the task, edit thepackage.json
file and add the following source code.
...,
"dependencies": {
...,
"pentaho-dashboard": "1.0.1"
To find the latest release, check the pentaho-dashboard
npm package directly.
2. Setting the proxy
To avoid the cross-origin resource sharing issue, the solution is to redirect the local URI /pentaho
to the correct URL (in our example http://localhost:8080/pentaho
). In the development environment the task can be easily completed using the proxy.conf.json
file. If the file exists, add the configuration as follows.
...,
"/pentaho": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": false
}
If the proxy.conf.json
file does not exist, create it into the root folder of your project and fill it with the following JSON content.
{
"/pentaho": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": false
}
}
Of course, the target URL should be replaced with the right one for your environment, containing the server/port where Pentaho Business Analytics platform is up and running.
Only if you are creating the proxy.conf.json
file, edit thepackage.json
file and change the start
item as following.
"scripts": {
...
"start": "ng serve --proxy-config proxy.conf.json"
3. Including the JS script
The HTML page requires one JS file to be included in the head
tag. To develop this, edit the .angular-cli.json
file and add the following configuration.
...,
"scripts": [
...,
"../node_modules/pentaho-dashboard/src/assets/pentahoHeaderScript.js"
Be aware that the .angular-cli.json
file must exist in an Angular application, directly into the root folder of the project. If you don't see it suing the file explorer, it could be hidden according to the default settings of your Operating System.
4. Importing the PentahoDashboardModule
Now that everything is correctly configured, it's time to import the PentahoDashboardModule
into the application. The first thing to do is to edit the tsconfig.json
file and setup the include
property as described below.
{
"compileOnSave": false,
"compilerOptions": { ... },
"include": [
"src/**/*",
"node_modules/pentaho-dashboard/index.ts"
Once done, edit the src/app/app.module.ts
file and add the source code as described below.
...
import { PentahoDashboardModule } from 'pentaho-dashboard';
...
@NgModule({
imports: [
...,
PentahoDashboardModule
5. Installing the package
Last but not least, download and install the pentaho-dashboard
package executing the following command from a terminal.
npm install
Once done, run the npm start
command and open a browser at http://localhost:4200
.
What to do next
Congratulations! Your Angular application is ready to manage the Pentaho sessions and dashboards. In the following sections you will learn how to log in into Pentaho (defining a valid session), how to log out and how to render all your existing or future dashboards.