Difficulty setting up any of the SDKs in an Angular application

[jBalesteri]

I have been fighting with the SDKs for the last few weeks trying to build out an Angular application. Prior to using the SDKs, I was able to perform most essential API functions with my Angular app with a “middleware” service that communicates with an Express proxy. I am trying to do a few more complex things that will require me to do inline queries in Looker and it seems that it will be easier to use the SDK to chain these actions.

We already have a method of performing authentication that will happen outside of the Angular/Express apps (it is using Oauth and lives on a separate backend server). That service performs the authentication and then passes me user details and the bearer token.

I am able to use the API directly to get dashboards, looks, users, etc. Where I start to have issues is when attempting more complex operations. One example is in a “tabbed dashboard” scenario…

We have implemented a convention where we group several dashboards together in a folder. One of those dashboards has ONLY filters, and the rest have actual tiles. All of the dashboards with tiles will be in a “tab”, while the filter only dashboard is being used to hydrate a “recreated” set of filters not using the actual Looker UI elements. All of the fields appear properly with names and proper type of field (dropdown, multiselect, text input, etc) however, most of them do not have the actual options in them. I am aware that I need to drill in further with an inline query to get those options similar to this…
 

import looker_sdk

sdk = looker_sdk.init31("looker.ini") 

data = sdk.search_dashboard_elements(dashboard_id=dash_id)

element_query_body = data[0].result_maker.query

element_query_body['filters']

However, I have not been able to successfully initialize the looker sdk within the angular app, and I cannot figure out how to successfully make that call directly to the Looker API. When going directly to the API, I get responses saying there are errors with my query…

{
    "id": "5704a12a62b9a82a15f7345d372d2e9a",
    "supports_pivot_in_db": true,
    "null_sort_treatment": "low",
    "from_cache": false,
    "expired": false,
    "ran_at": "2021-06-03T15:40:24+00:00",
    "aggregate_table_used_info": null,
    "runtime": "0.001",
    "sql": "-- SQL could not be generated because of errors with this query.",
    "sql_explain": null,
    "fields": {
        "measures": [],
        "dimensions": [],
        "table_calculations": [],
        "pivots": []
    },
    "fill_fields": [],
    "has_totals": false,
    "has_row_totals": false,
    "applied_filters": {},
    "applied_filter_expression": null,
    "number_format": "1,234.56",
    "explore": {
        "name": "v_pricing_result_comparison",
        "label": "Pricing Result Comparison",
        "description": null
    },
    "timezone": "America/Chicago",
    "data": [],
    "errors": [
        {
            "message": "Must query at least one dimension or measure",
            "message_details": null,
            "params": null,
            "edit_url": null,
            "error_pos": null,
            "fatal": true,
            "level": "fatal",
            "login_required_oauth_application_id": null
        }
    ],
    "drill_menu_build_time": 0.028707,
    "has_subtotals": false
}

If anyone has any suggestions on how to form that request directly to the API, I would greatly appreciate it. Alternatively, given my explained setup for authentication, any advice on how to utilize the browserSDK in an angular app, that would also be of great help. I am struggling with lack of proper and current documentation on the various Looker SDKs