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. — user4841119
– user4841119, Commented Aug 10, 2016 at 7:27
check that you include all required files in "publishOptions" section in project.json — Set
– Set, Commented Aug 10, 2016 at 7:55

Kev · Accepted Answer · 2016-08-10 07:53:48Z

1

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/".

answered Aug 10, 2016 at 7:53

Kev

5615 silver badges8 bronze badges

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

2 Comments

ashilon Over a year ago

I'll include a screenshot of the directories, so you can help me determine if i'm missing something. Thanks/

Kev Over a year ago

As you can see in this folder only exist one file "index", here you should have the files "edit.html" and "new.html" copy this files from your source code, html files doesn't need compile.

Community · Accepted Answer · 2017-05-23 12:24:45Z

0

OK, found the cause of the problem.
I didn't know that AngularJS references urls' from the server's root. So, the following api call:
$http.get("/api/students")
cannot be found because it's missing the server root: "MyServer/api/students/".
I found the solution for this here: Using a Relative Path for a Service Call in AngularJS

Thank you all for your answers. They helped me in other ways :)

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Aug 12, 2016 at 11:23

ashilon

1,9813 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

Publish ASP.NET CORE web app with AngularJS to IIS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related