Angular routing and .net: ng-view not displaying I'm trying to learn how to combine angular routing with MVC routing, but no matter what I try ng-view will not be loaded onto the DOM; instead when inspecting on the browser I see that ng-view has been automatically commented out even though the routing seems to be working. Does anyone know why this is not loading the views?
My controller:
public class HomeController : Controller
{

    public IActionResult Index()
    {
return View();
    }

    public IActionResult Gallery()
    {

return View();
    }

    public IActionResult Animation()
    {

return View();
    }

    public IActionResult Error()
    {
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }

    public PartialViewResult Fade()
    {

return PartialView();
    }


    public PartialViewResult Slide()
    {

return PartialView();
    }

}

}
My _Layout.cshtml:


<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Cat</title>

    <environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />

<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!--
<script src="~/Angular/navBar.js"></script>
<script src="~/Angular/index.js"></script>
<script src="~/Angular/gallery.js"></script>
<script src="~/Angular/animations.js"></script>
<script src="~/Angular/app.js"></script>
-->
<script src="~/Angular/angularBundle.js"></script>



    </environment>
    <environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

    </environment>
</head>
<body>
    <div id="nav-bar" ng-controller="navController" ng-cloak >
<nav-bar ng-cloak></nav-bar>     
    </div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; 2018 - Cat</p>
</footer>
</div>
    
</body>
</html>


My Animations View:


@{
    ViewData["Title"] = "Animation";
}

<div ng-controller="animationsController">
    <table class="table">
<tr>
<th><a href="#!fade">Fade</a></th>
<th><a href="#!slide">Slide</a></th>
</tr>
    </table>
 
    <ng-view></ng-view>

</div>


Where the routing is being done:


var animations = angular.module('animations', ['ngRoute']);

animations.config(function routing($routeProvider) {
    $routeProvider
.when('/fade', {
templateURL: '/Home/Fade',
controller: 'animationsController',
controllerAs: 'fade'
})
.when('/slide', {
templateURL: '/Home/Slide',
controller: 'animationsController',
controllerAs: 'slide'
})
//.otherwise({
//    redirectTo: '/fade'
       // });
});

animations.controller('animationsController', function animationsController($scope, $rootScope){
 $rootScope.title = {value: 'Animation'};
 
 $scope.fakeJSON = [{id : 0, src : "/images/cat1.jpg" }, {id : 1, src: "/images/cat2.jpg"}, {id : 2, src: "/images/cat3.jpeg"}];
 
});


Here's the partial view that should be loaded where ng-view is:


@{
    ViewData["Title"] = "Animation: Slide";
}

<h1>Cats Sliding Everywhere!</h1>

<img ng-repeat="image in fakeJSON" alt="cute cat" src={{image.src}} alt="asd" class="col-md-offset-5 img-responsive slide-repeat">


And here's what I get upon clicking either of those links:
Screenshot
Edit: Added a plunker with the animation stuff
Plunker

So I figured it out, there was a couple things wrong:


*

*I had templateURL instead of templateUrl for my .when case

*I needed to set the hash prefix of $location to "!" (even though I had read that it was the default for the angular version I was using)

*The a elements' href attributes had to be "#!/page" rather than "#!page" in the html




animations.config(function routing($routeProvider,  $locationProvider) {
    $routeProvider
.when('/fade', {
templateUrl: 'Fade.html',
controller: 'animationsController',
controllerAs: 'fade'
})
.when('/slide', {
templateUrl: 'Slide.html',
controller: 'animationsController',
controllerAs: 'slide'
})
.otherwise({
redirectTo: '/fade'
       });
       
       $locationProvider.hashPrefix('!');
});


I have updated the Plunker, in case anyone needs it as a reference in the future