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

Question

目前我正在尝试让 ng2-adal 在我的项目中工作，但我运行进入。

幸运的是我得到了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的答复。我克隆了 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)

所以我相应地添加了 but 包，就像我在上面添加了图形客户端一样。但这不会导致大量丢失的包（例如 formidable、form-data、url、stream、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) using 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);

            })
       })
  }

}

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

Use microsoft-graph-client in project with SystemJS

angular

systemjs

microsoft-graph-api

adal

adal.js