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。我想你已经知道了。之后，只需使用像MicrosoftGraph.Client.xxx

这样的用法来引用Javascript api

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

            })
       })
  }

}

在SystemJS项目中使用microsoft-graph-client

2 个答案: