CODEWITHSUNDEEP
asp.net-mvcmodel-view-controllerangular
Rex the Strange
Rex the Strange

Reputation: 131

Angular2 and ASP.NET MVC

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.

Upvotes: 2

Views: 390

Answers (1)

Nick Acosta
Nick Acosta

Reputation: 1910

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.

Upvotes: 1

Related Questions