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, Jun 28 '16 at 20:48

score 1 · Answer 1 · answered Jun 28 '16 at 17:25

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 '16 at 17:25

Nick Acosta

1,890
17
19

Thanks for the response. I'll give it a shot and will let you know. – Rex the Strange Jun 28 '16 at 22:03
Oh, and thank you for the references. I'll check those out, too. – Rex the Strange Jun 28 '16 at 22:03
Nope. That didn't seem to do it. The files are on GitHub at: https://github.com/widgetinc/Angular-2-MVC if anyone is interested in having a crack at it. – Rex the Strange Jun 29 '16 at 17:54

Angular2 and ASP.NET MVC

1 Answers1