在带有 SystemJS 的项目中使用 microsoft-graph-client

Question

目前我正在尝试让 ng2-adal 在我的项目中工作，但我遇到了some trouble。

幸运的是，我得到了Fei Xue 的答复，但它仍然挂起。通过尝试重现该问题，我在GitHub 上发布了一个示例项目，但Fei 在第一次运行时遇到了问题，他从his side 提供了一个工作示例。我克隆了 repo 并尝试了它，在删除 e2e 测试并将 rx.js 更新到版本 5.4.2 之后它工作了。

然后我尝试将microsoft-graph-client 添加到项目中。 Fei已经将它添加到package.json中，所以我只需要使用它......

在文件microsoftGraph.component.ts 中，我导入了客户端并尝试通过以下代码调用来使用它：

   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);
                }
            });
        });
    }

只要我插入该代码并构建项目，我就会在浏览器控制台中收到一条错误消息（不是来自编译器）：

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

于是我开始在项目中配置systemjs.config.js文件，并添加了地图和包配置：

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

构建并重新加载后，我收到了一些错误消息，抱怨缺少 es6-promise 和 superagent：

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

所以我添加了相应的包，就像我添加了上面的图形客户端一样。但这不会导致大量丢失的包（例如，强大的、表单数据、url、流、mime、util、zlib ......）。

如果我继续添加所有这些，我想我会得到更多丢失的包，这些包中的每一个都声明了所有 npm 依赖项。

结论

我做错了，还有另一种方法来配置 system.js 以自动而不是手动制作所有这些东西。但是怎么做？请给我一些关于如何正确配置 system.js 以使用 microsoft-graph-client 的见解。

Answer 1

我能够重现您的错误，但也不太明白为什么。我检查了@microsoft/microsoft-graph-client 并看到它们具有与它尝试加载的库匹配的依赖项列表。那么让我们看看是否有更多专家的答案。

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

我们可以使它工作的一种肮脏方法是引用 index.html 上的 js 文件。并在我们需要使用绕过 TypeScript 检查时在组件上添加declare var MicrosoftGraph: any。我想你已经知道了。之后只需参考 Javascript api 的用法，如 MicrosoftGraph.Client.xxx

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

Answer 2

AFAIK，这是使用 SystemJS 加载 microsoft-graph-client SDK 的已知问题（请参阅 here）。

为了调用 Microsoft Graph，我按照代码示例 (msgraph-typescript-typings) 使用 superagent。

这是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);

            })
       })
  }

}