2 Replies Latest reply on Feb 27, 2018 11:33 AM by Chandra Shetty

    Error : Cannot find name 'tableau'  in Angular2 with Typescript

    kishore utukuru

      Hi,

       

      I am integrating table reports in to my Angular2 CLI application, while compiling application I am getting error as  "Cannot find name 'tableau'.  Here are more details on this

       

      Tableau version: 10.0.2

      Tableau JavaScript Version: tableau-2.1.2.min.js

      Programming Language: Typescript and Angular2

       

      Here are the steps which I did for Tableau reports integration

      Step:1 - Included table JavaScript API in .angular-cli.json

                   "scripts": ["../src/assets/libs/tableau-2.1.2.min.js"] // Path is correct

      Step:2 - loading table reports in to one of my Angular2 class

               Typescript Class Code:    

                export class DashboardComponent implements OnInit {

                            ngAfterViewInit(){

                                    this.initViz();

                            }

                            initViz() {

                                   var containerDiv = document.getElementById("vizContainer"),

                                   url = "https://tableau-snd.company.net/#/site/POC/views/JobDetails/JobStatusDashboard?:iid=1",

                                  options = {hideTabs: true,

                                                   onFirstInteractive: function () {

                                                        console.log("Run this code when the viz has finished loading.");

                                                 }

                           };

       

                    var viz = new tableau.Viz(containerDiv, url, options);

             }

           }

       

      Note: some times this error will not shows and load with out errors not sure why? I am assuming this new tableau object is creating before loading tableau-2.1.2.min.js or Typescript/Angular CLI not able to recognize tableau object.

       

      Please let me know how to fix this issue. If you can provide an example will be a great.

       

      Thanks

        • 1. Re: Error : Cannot find name 'tableau'  in Angular2 with Typescript
          kishore utukuru

          Found the solution for this issue, Here is the solution

          Add the below code in to

          1. In app.component.js import Tableau js file

                   Ex: import '../assets/libs/tableau-2.1.2.min.js';

           

          2. In Dashboard.component.js  create a tableau variable

               Ex: declare var tableau: any;

           

          the above solution fixed my issue.

           

          Thanks.

          • 2. Re: Error : Cannot find name 'tableau'  in Angular2 with Typescript
            Chandra Shetty

            Hi Kishore,

            Do you have to provide the api path in both .angular-cli.json & app.component.ts or only in app.compoent.ts?

             

            Imports in app.component.ts seems to look for the api under "src\app" folder irrespective of where the library is stored and what path you provide in the [scripts].

             

            I can get this working only by providing in index.html & no other place and nor do I have to import ONLY if I provide the path to Tableau server..  But if I try to reference to local path, I get error.  I want to refer to the local copy, Since my intention is to use dev version tableau extension library which is not in server.

             

            Thanks,

            Chandra