How to make systemjs module loading work with .net mvc?

Question

I grabbed the ng-book 2 as it seemed like a quality way to figure out Angular2. As a heads up, I've never used any of these module loaders or anything before and I've had very limited use of npm and node so all the terminology and assumed knowledge can be quite confusing.
ng-book 2 uses node but I figured I might as well start off using my usual .NET MVC server as that is what I'll be pairing Angular 2 with at work.

My current issue is apparently in the module loading, as I just keep getting 404 errors when systemjs is trying to load angular packages.

app.ts

/**
* A basic hello-world Angular 2 app
*/
import {
    NgModule,
    Component
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
    selector: 'hello-world',
    template: `
        <div>
            Hello World
        </div>
    `
})
class HelloWorld {
}

@NgModule({
    declarations: [HelloWorld],
    imports: [BrowserModule],
    bootstrap: [HelloWorld]
})
class HelloWorldAppModule { }

platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);

systemjs.config.js

// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app/app',
    'rxjs':                       'app/node_modules/rxjs',
    '@angular':                   'app/node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'rxjs': { defaultExtension: 'js' }
  };

  var angularPackages = [
    'core',
    'common',
    'compiler',
    'platform-browser',
    'platform-browser-dynamic',
    'http',
    'router',
    'forms',
    'upgrade'
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  angularPackages.forEach(function(pkgName) {
    packages['@angular/' + pkgName] = { 
      main: 'bundles/' + pkgName + '.umd.js', 
      defaultExtension: 'js' 
    };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

index.cshtml

<!DOCTYPE html>
<html>
    <head>
        <title>Angular 2 - Simple Reddit</title>

        <script src="~/app/node_modules/core-js/client/shim.min.js"></script>
        <script src="~/app/node_modules/zone.js/dist/zone.js"></script>
        <script src="~/app/node_modules/reflect-metadata/Reflect.js"></script>
        <script src="~/app/node_modules/systemjs/dist/system.src.js"></script>

        <link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" />
        <link rel="stylesheet" type="text/css" href="~/app/styles.css" />
    </head>
    <body>
        <script resource="~/app/resources/systemjs.config.js"></script>
        <script>
            System.import('/app/app.js')
                .then(null, console.error.bind(console));
        </script>

        <hello-world></hello-world>

    </body>
</html>

The layout of the project is like this

And what I end up getting with this are requests like

zone.js:101 GET http://localhost:18481/@angular/core 404 (Not Found)

artem · Accepted Answer · 2016-09-08 22:22:19Z

1

The first thing I see is that probably your systemjs config is not applied, because you have

   <script resource="~/app/resources/systemjs.config.js"></script>

Why do you have resource here? systemjs.config.js contains plain javascript code that should be executed like any other script.

answered Sep 8, 2016 at 22:22

artem

52.3k10 gold badges87 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle S Over a year ago

Unbelievable. Of course it was a typo issue that I didn't see. Thank you for your sharp eye.

Collectives™ on Stack Overflow

How to make systemjs module loading work with .net mvc?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related