Publish ASP.NET CORE web app with AngularJS to IIS

Question

We are writing a new asp.net core web app (with the full .net framework), using angularjs ver. 1.5.8.
We are just starting out with the app, so it's very simple atm, with only just one page that contains a table with student data.
Now, when I run the application using IIS Express, the application works fine, the data is displayed and there are no errors in the browser's console.
But when I publish the app to my local IIS, it doesn't work. The angular view is empty, so just the _layout is displayed.
I've tried the steps described in https://docs.asp.net/en/latest/publishing/iis.html, but like I said, it doesn't work.
Here's the code I'm using:

Program.Main():

public static void Main(string[] args)
        {
            var host = new WebHostBuilder()
                .UseKestrel()
                .UseContentRoot(Directory.GetCurrentDirectory())
                .UseIISIntegration()
                .UseStartup<Startup>()
                .Build();

            host.Run();
        }

site.js (the angular stuff):

angular.module('digitalRural', ['ngRoute', 'ngMaterial'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/',                                                  // Students controller
            {
                controller: 'StudentsController as students',
                templateUrl: 'html/students/index.html'
            })
            .when('/student/edit/:studentId',
            {
                controller: 'EditStudentController as editStudent',
                templateUrl: 'html/students/edit.html'
            })
            .when('/student/new',
            {
                controller: 'NewStudentController as newStudent',
                templateUrl: 'html/students/new.html'
            })
            .when('/login/',                                            // Login controller
            {
                controller: 'LoginController as loginCtrl',
                templateUrl: 'html/home/welcome.html'
            })
            .otherwise({
                redirectTo: '/'
            });
    })
    .controller('StudentsController',
        function ($http) {
            var students = this;

            $http.get("/api/students")
                .then(function (response) {
                    students.items = response.data;
                });
        })
    .controller('LoginController',
        function ($http) {
            var loginCtrl = this;

            $http.get("/api/login")
                .then(function (response) {
                    loginCtrl.currentUser = response.data;
                });
        });

Here's an image of the deployed app:

and the error in Chrome's console:

Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:13920 Error: [$compile:tpload] http://errors.angularjs.org/1.5.8/$compile/tpload?p0=html%2Fstudents%2Findex.html&p1=404&p2=Not%20Found
    at Error (native)
    at http://localhost/DigitalRural/lib/angular/angular.min.js:6:412
    at http://localhost/DigitalRural/lib/angular/angular.min.js:156:511
    at http://localhost/DigitalRural/lib/angular/angular.min.js:131:20
    at m.$eval (http://localhost/DigitalRural/lib/angular/angular.min.js:145:347)
    at m.$digest (http://localhost/DigitalRural/lib/angular/angular.min.js:142:420)
    at m.$apply (http://localhost/DigitalRural/lib/angular/angular.min.js:146:113)
    at l (http://localhost/DigitalRural/lib/angular/angular.min.js:97:322)
    at J (http://localhost/DigitalRural/lib/angular/angular.min.js:102:34)
    at XMLHttpRequest.t.onload (http://localhost/DigitalRural/lib/angular/angular.min.js:103:4)

What's weird is that all works fine with IIS Express, but with IIS, I get the error message above.

What gives?

angularjs cannot find the required template files. look at the network tab of browser. you will see alot of 404 errors. — scokmen
check that you include all required files in "publishOptions" section in project.json — Set

Kev Kev · Accepted Answer · 2016-08-10T07:53:48

The error is 404, because your module can't load your templates, review if your compiled version has this templates in "html/students/" or "html/home/".

Publish ASP.NET CORE web app with AngularJS to IIS

2 Answers