AngularJS 2 influenced by URL in ASP.NET MVC

Question

I'm using AngularJS 2 in a ASP.NET MVC 5 project, I do not use the routing provided by Angular and rely only on the MVC routing strategy.

Strangely, AngularJS seems to look at the URL and only load correctly when I'm on a route "domain/Controller", if I'm on a route as "domain/Controller/" or "domain/Controller/Action" my Angular app is not loading and I have the following error in the browser:

I'm using the following script to load my bootstrapper:

<script src="~/Scripts/systemjs.config.js"></script>
<script>
    System.import('../tsScripts/boot').catch(function (err) {
        console.error(err);
    });
</script>

my boot.ts file:

///<reference path="./../typings/globals/core-js/index.d.ts"/>
import {bootstrap}    from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS} from '@angular/http';

import {AppComponent} from './app';

bootstrap(AppComponent, [HTTP_PROVIDERS]);

I have no idea why Angular (or another part coming with the framework) is incompatible with the MVC routing, or what is wrong with my implementation.

Angular2 is a Single Page Application framework so not using its router kind of defeats the whole idea. Looks like you have issues with SystemJs config. — rook
– rook, Commented Sep 8, 2016 at 21:46
I'd suspect it's in the SystemJS configuration file as well. You may need to post the contents. It defines where to download files from. The base paths would need to be updated based on the current route. (But as mentioned by @rook, it's unlikely that you should do that given that Angular 2 isn't intended to be loaded over and over as a user navigates ). — WiredPrairie
– WiredPrairie, Commented Sep 9, 2016 at 1:02
Here is my SystemJs config pastebin.com/2JyvhcNK I'm interested by AngularJs for its MV* functionalities, but I would like to keep the navigation/routing/authentication policies from ASP.NET MVC. But it seems it's not the good tool for my needs. — NicoC
– NicoC, Commented Sep 9, 2016 at 14:07

Luca Corradi · Accepted Answer · 2016-12-29 15:59:16Z

1

I ran into the same problem, and I simply solved it placing this code into the head tag of _Layout.cshtml (so that is applied to all views)

<head>
  <base href="/">
  ...
</head>

Angular official doc

You can also fix it this way

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  ...
  imports: [RouterModule], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]);

answered Dec 29, 2016 at 15:59

Luca Corradi

2,1411 gold badge16 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

AngularJS 2 influenced by URL in ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related