2

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?

1
  • Ok, I have discovered that SystemJs uses XHR to perform its loading, which means that I probably need to add authorization headers. SystemJs has an authorization tag, but I have set this to true and its still not working.
    – tone
    Commented May 1, 2017 at 11:27

1 Answer 1

10

Ok, I have solved this problem. The issue is with SystemJs. When SystemJs makes a call to the server to retrieve the included files, it makes XHR calls. It's no different than making a call to a webapi service from javascript - if you're not authenticated, it will fail with a 401 Unauthorized.

To get around this, you need to ensure that the authorization headers are included in the SystemJs calls. This is done by adding a meta tag in System.Config, and setting the authorization attribute to true. Here is my complete systemjs.config.js file, with the meta tag at the top that enables the authorization to work.

/**
 * 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);

I hope this helps someone else, cause this was a biatch to figure out.

3
  • I have found since writing this that using System Loader becomes problematic when your application starts to get a bit bigger. There are simply too many files being requested. You really do need to move to webpack to introduce bundling of those files. The best way to get started is to use the Angular template for Visual Studio now in Dot Net Core 2.0 SDK as it provides a working app out of the box. You will need to install the Dot Net Core 2.0 framework, found here: microsoft.com/net/download/core.
    – tone
    Commented Sep 27, 2017 at 23:09
  • you just saved me so much trouble. Thank you. Commented Sep 29, 2017 at 19:00
  • The latest is that the angular template in visual studio is changing. At the time the template was created, angular cli wasn't around. Angular cli is now a defacto standard, so the next template is going to support angular cli. When starting a new angular app with visual studio, you will be better off downloading the new cli based template (now a release candidate) by going to the JavaScript services website and start with that.
    – tone
    Commented Feb 13, 2018 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.