SystemJs无法使用angular4中的Windows身份验证和打字稿

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>]

讨厌.但我有点理解它.SystemJs在Systemjs.config.js文件的packages部分中加载了main.js:

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

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

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

格式和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？那是因为typescript json文件中的module语句.在该文件中,模块属性设置为commonjs.我尝试过其他模块类型,但是除了commonjs之外我还有401个未经授权的事情,包括使用系统.

{
  "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而失败.

要解决此问题,您需要确保SystemJs调用中包含授权标头.这是通过在System.Config中添加元标记并将authorization属性设置为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);

我希望这有助于其他人,因为这是一个可以解决的问题.