angular - SystemJs 无法在 angular4 中使用 Windows 身份验证和 typescript

Question

我目前正在尝试使用 Windows 身份验证运行 Angular 4 应用程序。我已经通过匿名身份验证成功运行，但不是 Windows 身份验证。一旦我将其切换到 Windows 身份验证，页面就会失败。我得到的第一个错误是:

(index):38 Error: Fetch error: 401 Unauthorized
  Instantiating http://localhost:1264/app/main.js
  Loading app
    at http://localhost:1264/node_modules/systemjs/dist/system.src.js:1500:13 [<root>]
    at Zone.run (http://localhost:1264/node_modules/zone.js/dist/zone.js:125:43) [<root> => <root>]
    at http://localhost:1264/node_modules/zone.js/dist/zone.js:760:57 [<root>]
    at Zone.runTask (http://localhost:1264/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:1264/node_modules/zone.js/dist/zone.js:593:35) [<root>]
    at <anonymous> [<root>]

讨厌。但我有点理解。 main.js 由 SystemJs 在 Systemjs.config.js 文件的包部分加载:

    packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },

所以这个问题与此有关。我在某处读到要解决这个问题，我必须添加更多属性，如下所示:

packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js',
        format: 'register',
        scriptLoad: true
      },

format 和 scriptLoad 属性似乎让我通过了未经授权的标签，但现在我遇到了另一个问题。它现在给我以下错误:

Uncaught Error: Module name "@angular/platform-browser-dynamic" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at F (require.js:7) [<root>]
    at Object.m [as require] (require.js:26) [<root>]
    at requirejs (require.js:32) [<root>]
    at :1264/app/main.js:2:34 [<root>]

再一次，我有点明白发生了什么事。它试图执行 main.js 文件，但该文件包含“require”语句。此时，SystemJs 上下文似乎没有识别出 requirejs 已加载。我的索引文件中有一个脚本语句。

main.ts 看起来像这样:

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

// ***4***
platformBrowserDynamic().bootstrapModule(AppModule);

转换为:

"use strict";
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./app.module");
// ***4***
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
//# sourceMappingURL=main.js.map

它正在对 require 语句进行轰炸。

好的，那么为什么它首先使用 require 呢？那是因为 typescript json 文件中的模块语句。在该文件中，模块属性设置为 commonjs。我已经尝试过其他模块类型，但我得到 401 未授权除 commonjs 以外的任何东西，包括使用系统。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

我已将我的应用程序放在 bitbucket 上，以防有人感兴趣。该应用程序是在 Visual Studio 2017 Enterprise 中构建的，可在此处找到:Angular2VS2015 (这是一项正在进行的工作，因此命名不当)

那么问题来了，如何让应用程序在 Windows 身份验证的上下文中运行？

Answer 1

好的，我已经解决了这个问题。问题出在 SystemJs 上。当 SystemJs 调用服务器以检索包含的文件时，它会调用 XHR。这与从 javascript 调用 webapi 服务没有什么不同 - 如果您未通过身份验证，它将失败并返回 401 Unauthorized。

要解决此问题，您需要确保授权 header 包含在 SystemJs 调用中。这是通过在 System.Config 中添加元标记并将授权属性设置为 true 来完成的。这是我完整的 systemjs.config.js 文件，顶部有元标记，使授权生效。

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        meta: {
            '*': { authorization: true }
        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ej-angular2': 'npm:ej-angular2'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'ej-angular2': {
                main: './src/index.js'
            }
        }
    });
})(this);

我希望这对其他人有帮助，因为这是一个很难弄清楚的问题。