gapi.client.youtube is undefined in angular app

Question

Note: I know the subject looks similar to that other question, but it is different

I have angular app that calls Google API (gapi).

I have functions that call gmail api, calendar api and youtube api.

Here I have 2 questions:

Question1: Why is youtube here unrecognizable? Although I have all the types installed:

Question2: When running the app, gmail api and calendar api calls work fine, but youtube api call throws an error that youtube is undefined?

getMessages() {
    return gapi.client.gmail.users.messages.list({ userId: 'me', labelIds: ['INBOX', 'UNREAD'] }).then();
}
getEvents() {
    return gapi.client.calendar.calendarList.list().then();
}

getChannels() {
    return gapi.client.youtube.channels.list({'part': 'snippet', 'mine': 'true'}).then();
}

For some reason in getChannels() function I get an error

Uncaught TypeError: Cannot read property 'channels' of **undefined**

where gapi.client.youtube is undefined.

gapi is defined, client too, but youtube is not.

Any help is appreciated. As you can see there is no difference in how these apis are called, same signature, dont understand why youtube is undefined.

Here is the screenshot in debug mode

Answer 1

Answer 1:

Checking the @types/gapi.client.youtube, the correct should be (at least what is defined in the type definition):

gapi.client.channels.list(null).then()

Update As discussed in the comments, I also believe the type definition is wrong and you should extend it in your project (until the definition is fixed)

Answer 2: Maybe this answer helps you

Answer 2

I believe gapi is not meant to be used with node or Angular. Try Google APIs Node.js Client

Edit: Not standalone, but here is a related thread with updates and instructions

Answer 3

Before you use gapi.client.youtube you must call init function :

gapi.load('client', () => {
  gapi.client.init({
    apiKey: *****,
    clientId: *****,
    discoveryDocs: *****,
    scope: *****,
  });
});

then in your gapi.client.youtube.channels.list() Request you should send the token with it:

gapi.client.youtube.channels
    .list({
        mine: true,
        part: 'statistics',
        access_token: //SAVED-TOKEN,
    })
    .then(res => {
        console.log('channels', res);
    });