I am currently attempting to get an Angular 4 app running with windows authentication. I have it successfully running with anonymous authentication, but not windows auth. As soon as I switch it over to windows authentication, the page fails. The first error I got was:
(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>]
Nasty. But I kind of understand it. main.js was being loaded by SystemJs in the packages section in the Systemjs.config.js file:
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
so the issue has something to do with that. I read somewhere that to get around this, I have to add a couple more attributes, as follows:
packages: {
app: {
main: './main.js',
defaultExtension: 'js',
format: 'register',
scriptLoad: true
},
The format and scriptLoad attributes seem to get me past the unauthorized tags, but now I have another issue. It is now giving me the following error:
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>]
Again, I kind of figured out what was happening. It is attempting to execute the main.js file, but that file contains a "require" statement. At this point, the SystemJs context doesn't appear to recognise that requirejs is loaded. There is a script statement in my index file.
main.ts looks like this:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
// ***4***
platformBrowserDynamic().bootstrapModule(AppModule);
which transpiles to this:
"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
and it is bombing out on the require statement.
Ok, so why does it use require in the first place? That's because of the module statement in the typescript json file. In that file, the module attribute is set to commonjs. I have tried other module types, but I get 401 unauthorised with anything other than commonjs, and that includes using system.
{
"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"
]
}
I have put my app up on bitbucket, in case anyone is interested. The app, which was build in Visual Studio 2017 Enterprise, can be found here: Angular2VS2015 (its a work in progress, hence the bad naming)
So the question is, how do I get the app to run under the context of windows authentication?