1 Reply Latest reply on Jan 9, 2020 3:05 AM by Minh Dao

    Need help!! Error: The URL points to a website, not a web data connector

    Minh  Dao

      I followed the Earthquake example but I create the WDC using Angular. The code is the same, just modify a bit to work with Angular, and it works fine in Simulator. However, I kept getting the error of "The URL points to a website, not a web data connector" when using Tableau Desktop. I searched in the forum for this problem but couldn't find the answer. The issue is certainly not from the version incompatibility, as I used tableauwdc-2.3 and Tableau Desktop 2020.1.0. I really don't know where does it go wrong. Please help me, I have been struggling for a couple of days

       

      Here is the code

       

      wdc.service.ts

       

      import { Injectable } from "@angular/core";

       

      import { HttpService } from './http.service';


      declare var tableau: any;


      @Injectable({

         providedIn: 'root'

      })

      export class WdcService {

         private connector: any;


         constructor(private httpService: HttpService){}


         initTableau = () => {

         this.connector = tableau.makeConnector();


         this.connector.init = (callback) => {

         console.log('connected');

         callback();

        }


         this.connector.getSchema = (callback) => {

         var cols = [{

         id: "id",

         dataType: tableau.dataTypeEnum.string

        }, {

         id: "mag",

         alias: "magnitude",

         dataType: tableau.dataTypeEnum.float

        }, {

         id: "title",

         alias: "title",

         dataType: tableau.dataTypeEnum.string

        }, {

         id: "location",

         dataType: tableau.dataTypeEnum.geometry

        }];

        

         var tableSchema = {

         id: "earthquakeFeed",

         alias: "Earthquakes with magnitude greater than 4.5 in the last seven days",

         columns: cols

        };

        

         callback([tableSchema]);

        }


         this.connector.getData = (table, callback) => {

         this.httpService.getData().subscribe(d => {

         var feat = d.features,

         tableData = [];


         // Iterate over the JSON object

         for (var i = 0, len = feat.length; i < len; i++) {

         tableData.push({

         "id": feat[i].id,

         "mag": feat[i].properties.mag,

         "title": feat[i].properties.title,

         "location": feat[i].geometry

        });

        }


         table.appendRows(tableData);

         callback();

        })

        }


         tableau.registerConnector(this.connector);

        }


         sendToTableau = () => {

         tableau.connectionName = "USGS Earthquake Feed";

         tableau.submit();

        }

      }

       

      app.component.html

       

      <div class="container container-table">

       

        <div class="row vertical-center-row">

         <button type="button" class="btn btn-success" (click)="onSubmit()">Get Earthquake Data!</button>

        </div>

      </div>

       

      app.component.ts

       

       

      import { Component } from '@angular/core';

       

      import { WdcService } from './services/wdc.service';

      import { sendToTableau } from './utils/wdc';


      @Component({

        selector: 'app-root',

        templateUrl: './app.component.html',

        styleUrls: ['./app.component.css']

      })

      export class AppComponent {

        constructor(

         private wdcService: WdcService

        ){

         this.wdcService.initTableau();

        }


        onSubmit(){

         this.wdcService.sendToTableau();

        }

      }

      }

       

      angular.json

       

      "projects": {

       

         "wdc-test": {

         "projectType": "application",

         "schematics": {},

         "root": "",

         "sourceRoot": "src",

         "prefix": "app",

         "architect": {

         "build": {

         "builder": "@angular-devkit/build-angular:browser",

         "options": {

         "outputPath": "dist/wdc-test",

         "index": "src/index.html",

         "main": "src/main.ts",

         "polyfills": "src/polyfills.ts",

         "tsConfig": "tsconfig.app.json",

         "aot": false,

         "assets": [

         "src/favicon.ico",

         "src/assets"

        ],

         "styles": [

         "node_modules/bootstrap/dist/css/bootstrap.min.css",

         "src/styles.css"

        ],

         "scripts": [

         "node_modules/bootstrap/dist/js/bootstrap.min.js",

         "src/assets/libs/tableauwdc-2.3.latest.min.js"

        ]

        },

        • 1. Re: Need help!! Error: The URL points to a website, not a web data connector
          Minh  Dao

          So I used the debugger for tableau desktop and found out that the init function is called before register function, that's why it doesn't get the this._wdc obj. But everything runs in the correct order in Simulator. What's the problem???

           

          in Simulator:

          Initializing message handling

          Initializing public interface

          Initializing private interface

          Initializing shared WDC

          Connector registered

          Received message!

          init

           

          in Tableau Desktop:

          Initializing NativeDispatcher for qwebchannel

          QWebChannel created successfully

          Initializing public interface for NativeDispatcher

          Initializing private interface for NativeDispatcher

          Initializing shared WDC

          init

          Uncaught (in promise) TypeError: Cannot read property 'init' of undefined

              at o._triggerInitialization (scripts.js:9)

              at Object._waitAndTriggerInit (<anonymous>:12:9)

              at <anonymous>

          Connector registered