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.

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.

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.

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.

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.