Angular2 and ASP.NET MVC

Question

I'm teaching myself Angular2 (the wave of the future, apparently) and I'm getting experimental. I followed Ibrahim Uludag's tutorial here:

http://www.ibrahimuludag.com/2016/01/angular2-and-visual-studio.html

and that works just fine. But I want to go one step further and use an MVC project instead of a TypeScript project as Ibrahim suggests. I'm using a simple structure (one controller, one view) and I've added the Angular2 JavaScript references to my view (along with header, body etc.). I had to prefix the filenames with a slash, otherwise the server interprets them as as controller / view references. That part works fine.

The problem I have is with this command:

System.config ({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import ('app/boot')
    .then (null, console.error.bind(console));

I can see from the debugger that it's trying to find http://localhost/Default/app/boot - the "Default" part being the name of my controller (the same problem that arose when I didn't include a slash in the direct JavaScript references). I've tried prefixing the "app/boot" with a slash ("/app/boot") and this sort of works: it will find boot.ts but not any of the dependencies, again, adding the controller name to the URL.

Does anyone have any suggestions or, at the very least, a reference of where I can find information about the System.import directive?

Thank.

The System.import call tells SystemJS to import the main file, in your case it is boot.js? — null canvas
– null canvas, Commented Jun 28, 2016 at 20:48

Nick Acosta · Accepted Answer · 2016-06-28 17:25:36Z

1

First, I commend you for diving into the world of angular2.

System.import is part of SystemJS. SystemJS is a module loader that angular 2 uses while the new fancy javascript specs are finalized and implemented by browsers.

For more information on System.import see: https://github.com/systemjs/systemjs

I believe your issue is with the way MVC is serving static files, not with the way SystemJs is attempting to load modules.

See this article: Using ASP.NET routing to serve static files

In your RouteConfig.cs file:

routes.IgnoreRoute("app/{file}.js");

This should tell MVC to ignore js files located in the app folder at the root of your project. SystemJS should then be able to load your modules properly.

answered Jun 28, 2016 at 17:25

Nick Acosta

1,93519 silver badges21 bronze badges

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

3 Comments

Rex the Strange Over a year ago

Thanks for the response. I'll give it a shot and will let you know.

Rex the Strange Over a year ago

Oh, and thank you for the references. I'll check those out, too.

Rex the Strange Over a year ago

Nope. That didn't seem to do it. The files are on GitHub at: github.com/widgetinc/Angular-2-MVC if anyone is interested in having a crack at it.

Collectives™ on Stack Overflow

Angular2 and ASP.NET MVC

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related