SystemJs не работает с аутентификацией windows и typescript в angular4


В настоящее время я пытаюсь получить приложение Angular 4, работающее с проверкой подлинности windows. У меня он успешно работает с анонимной аутентификацией, но не с Windows auth. Как только я переключаю его на проверку подлинности 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>]

Противно. Но я вроде как понимаю это. главный.js загружался SystemJs в разделе пакеты в Systemjs.конфиг.файл 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>]
Опять же, я вроде как понял, что происходит. Это попытка выполнить главное.файл js, но этот файл содержит инструкцию require. На этом этапе контекст SystemJs, по-видимому, не распознает, что requirejs является нагруженный. В моем индексном файле есть оператор сценария.

Главная.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 в первую очередь? Вот из-за заявления модуля в файл машинописного текста в формате 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?

1 2

1 ответ:

Хорошо, я решил эту проблему. Проблема заключается в SystemJs. Когда SystemJs делает вызов серверу для получения включенных файлов, он делает XHR-вызовы. Это ничем не отличается от вызова сервиса webapi из javascript - если вы не аутентифицированы, он завершится с ошибкой 401 Unauthorized.

Чтобы обойти это, необходимо убедиться, что заголовки авторизации включены в вызовы SystemJs. Это делается путем добавления мета-тега в систему.Конфигурация и настройка атрибут авторизации имеет значение true. Вот мой полный systemjs.конфиг.файл 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);

Я надеюсь, что это поможет кому-то еще, потому что это был biatch, чтобы выяснить.