Utiliser Microsoft-Graph-client dans le projet avec SystemJS

Question

Actuellement j'essaye d'obtenir ng2-adal pour travailler dans mon projet, mais j'ai couru dans some trouble.

Heureusement, j'ai obtenu une réponse de Fei Xue, mais elle se bloque toujours. En essayant de reproduire le problème, j'ai publié un exemple de projet sur GitHub, mais Fei avait des problèmes dans la première exécution pour le faire fonctionner et il a fourni un échantillon de travail de his side. J'ai cloné le repo et l'ai essayé et après avoir enlevé le test e2e et mis à jour rx.js à la version 5.4.2 cela a fonctionné. Puis j'ai essayé d'ajouter microsoft-graph-client au projet. Fei déjà ajouté à la package.json, donc je viens d'avoir à l'utiliser ...

Dans le fichier microsoftGraph.component.ts j'ai importé le client et essayé de l'utiliser en appelant par ce 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); 
       } 
      }); 
     }); 
    } 

dès que j'insérer ce code et construire le projet, je reçois un message d'erreur dans la console du navigateur (pas du compilateur):

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

donc je commencé à configurer le fichier systemjs.config.js dans le projet et ajouté la configuration de la carte et du paquet:

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

Après la construction et reload j'ai reçu des messages d'erreur, se plaignant de manquer ES6-promesse et superagent:

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

J'ajouté, mais les paquets en conséquence, comme je l'ai ajouté le client graphique ci-dessus. Mais cela ne mène pas à une pléthore de paquets manquants (par exemple formidable, forme-données, URL, flux, mime, util, zlib, ...). Si je continuais à les ajouter tous, j'imagine que j'obtiendrais d'autres paquets manquants, en aval de toutes les dépendances npm que chacun de ces paquets a déclarées.

Conclusion

je fait quelque chose de mal et une autre façon de configurer existe system.js pour faire toutes ces choses automatiquement et non à la main. Mais comment? S'il vous plaît donnez-moi quelques idées sur la façon de configurer system.js correctement pour utiliser le client microsoft-graphique.

Answer 1

Je suis capable de reproduire votre erreur et je ne comprends pas vraiment pourquoi. J'ai vérifié le @ microsoft/microsoft-graph-client et vu qu'ils ont la liste de dépendance qui correspond à la bibliothèque, il a essayé de charger. Alors voyons s'il y a d'autres réponses d'experts.

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

Un moyen sale que nous pouvons le faire fonctionner est de se référer au fichier js sur index.html. Et ajouter declare var MicrosoftGraph: any sur le composant lorsque nous devons utiliser pour contourner la vérification TypeScript. Je pense que tu l'as déjà su. Après cela, tout simplement se référer à l'api Javascript avec l'utilisation comme MicrosoftGraph.Client.xxx

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

Answer 2

AFAIK, c'est une question de savoir pour charger les microsoft-graph-client SDK en utilisant SystemJS (voir here).Pour appeler le Microsoft Graph, je suis l'exemple de code (msgraph-typescript-typings) en utilisant superagent.

Voici le changement de code pour la 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); 

      }) 
     }) 
    } 

}