CODEWITHSUNDEEP
angularsystemjsmicrosoft-graph-apiadaladal.js
Oliver
Oliver

Reputation: 45101

Use microsoft-graph-client in project with SystemJS

Currently I'm trying to get ng2-adal to work within my project, but I ran into some trouble.

Fortunately I got an answer from Fei Xue, but it still hangs. By trying to reproduce the problem I published a sample project on GitHub, but Fei had problems in the first run to get it to work and he provided a working sample from his side. I cloned the repo and tried it out and after removing the e2e test and updating rx.js to version 5.4.2 it worked.

Then I tried to add the microsoft-graph-client to the project. Fei already added it to the package.json, so I just had to use it...

Within the file microsoftGraph.component.ts I imported the client and tried to use it by calling by this code:

   if (this.isLoggedIn) {
        this.adalService.acquireToken('https://graph.microsoft.com').subscribe((token) => {
            console.log(token);

            this.graphClient = Client.init({
                debugLogging: true,
                authProvider: (done) => {
                    done(undefined, token);
                }
            });
        });
    }

As soon as I insert that code and build the project, I get an error message in the browser console (NOT from the compiler): 

GET http://localhost:3000/@microsoft/microsoft-graph-client 404 (Not Found)

so i started to configure the systemjs.config.js file within the project and added the map and package configuration:

map: {
    ...
    '@microsoft/microsoft-graph-client': 'npm:@microsoft/microsoft-graph-client/lib/src',
    ...
},
packages: {
    ...
    '@microsoft/microsoft-graph-client': {
        main: 'index.js',
        defaultExtension: 'js'
    }
    ...
}

After build and reload I got some error messages, complaining about missing es6-promise and superagent:

GET http://localhost:3000/es6-promise 404 (Not Found)
GET http://localhost:3000/superagent 404 (Not Found)

So I added but packages accordingly, like I added the graph client above. But this leads no to a pletora of missing packages (e.g. formidable, form-data, url, stream, mime, util, zlib, ...).

If I would continue to add all of them, I guess I would get further missing packages, down the road of all npm dependencies that each of these packages have declared.

Conclusion

I made something wrong and another way exists to configure system.js to make all this stuff automatically and not by hand. But how? Please give me some insights on how to configure system.js correctly to use the microsoft-graph-client.

Upvotes: 0

Views: 1046

Answers (2)

trungvose
trungvose

Reputation: 20034

I am able to reproduce your error and also don't really understand why. I checked the @microsoft/microsoft-graph-client and saw that they have the dependency list which is matched with the library it tried to load. So let's see If there are any more answer from experts.

  "dependencies": {
    "es6-promise": "^4.1.0",
    "superagent": "^3.5.2"
  }

One dirty way we can make it work is to refer to the js file on index.html. And add declare var MicrosoftGraph: any on the component when we need to use to bypass TypeScript check. I think you have already known about. After that just refer to the Javascript api with the usage like MicrosoftGraph.Client.xxx

<script type="text/javascript" src="node_modules/@microsoft/microsoft-graph-client/libgraph-js-sdk-web.js"></script>

Upvotes: 2

Fei Xue
Fei Xue

Reputation: 14649

AFAIK, this is a know issue to load the microsoft-graph-client SDK using SystemJS( refer here).

And to call the Microsoft Graph, I follow the code sample(msgraph-typescript-typings) using superagent.

Here is the changing code for for the microsoftGraph.component.ts:

import { Component, Inject, OnInit } from '@angular/core';

import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt/angular2-jwt';

import * as MicrosoftGraph from "@microsoft/microsoft-graph-types"

import * as request from 'superagent';

import { AdalService } from 'ng2-adal/services/adal.service';
import {SecretService} from '../services/secret.service';

@Component({
    selector: 'MicrosoftGraph',
    template: `<button (click)="getProfile()">Get profile using Microsoft Graph</button>`
})
export class MicrosoftGraphComponent {

    private userProfile: any;

    constructor(
        private adalService: AdalService,
        private secretService: SecretService,
        private http1: AuthHttp) {
        adalService.init(secretService.adalConfig);

        }


   public getProfile(){
       this.adalService.acquireToken("https://graph.microsoft.com").subscribe(function(token){
        console.log(token)

        request
            .get("https://graph.microsoft.com/v1.0/me")
            .set('Authorization', 'Bearer ' + token)
            .end((err:any, res:any) => {
                if (err) {
                    console.error(err)
                    return;
                }
                let user:[MicrosoftGraph.User] = res.body;
                  console.log(user);

            })
       })
  }

}

Upvotes: 2

Related Questions