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 ответ:
Хорошо, я решил эту проблему. Проблема заключается в 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, чтобы выяснить.