CODEWITHSUNDEEP
angulartypescriptgoogle-apigoogle-cloud-platformgoogle-cloud-endpoints
jonasjuss
jonasjuss

Reputation: 173

Connect to Google Cloud Endpoints from an Angular 2 app

I am currently refactoring a web-app from Angular 1 to Angular 2, but I am having difficulties finding any examples connecting to Google Cloud Endpoints from an Angular 2 app.

I used the angular-cli to create the Angular 2 application. I want to use the endpoints api from a couple of different services, so it would be preferable if any suggested answer takes this into account.

In Angular 1 I did the following

In my index.html:

    <script>
        function init() {
            console.log("Initializing Cloud Endpoints..");
            window.init();
        };
    </script>        

    <script src="https://apis.google.com/js/client.js?onload=init"></script>

and in my main.js:

function Main($scope, $window){
    var vm = this;

    $window.init= function() {
        $scope.$apply(vm.loadApi);
    };

    vm.loadApi = function(){
        gapi.client.load('deviceStockApi', 'v1', function(){

            console.log("Cloud Endpoints are now available");

        }, 'https://name-of-my-endpoints-app.appspot.com/_ah/api');
    }
}

In Angular 2 I have tried

Edit1: I should note that I am just trying to get the api to load for starters. This is why I have put all the code in the index.html file in the example below. However, optimally, I would prefer a solution with a best practice for initiating and using the Cloud Endpoints from an Angular 2 app.

In my index.html:

<script src="https://apis.google.com/js/client.js?onload=init"></script>

<script>
  function init() {
    console.log("Init called");

    gapi.client.load('deviceStockApi', 'v1', function(){
      console.log("Cloud Endpoints are now available");
    }, 'https://name-of-my-endpoints-app.appspot.com/_ah/api');
  }
</script>

When I run the webapp, the init function is not called (no console output). However, it seems like the script is loaded.

enter image description here

Any suggestions for how to fix this is appreciated! Also, if anyone has found some documentation from Google or others elaborating on this, please share!

Upvotes: 2

Views: 717

Answers (1)

Brad Friedman
Brad Friedman

Reputation: 103

Have you tried reversing the order of your operations here? Like you did for Angular 1, try moving the apis.google.com import below the init codeblock.

Upvotes: 1

Related Questions