简体   繁体   中英

Publish ASP.NET CORE web app with AngularJS to IIS

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?

错误是404,因为您的模块无法加载模板,请检查您的编译版本是否在“html / students /”或“html / home /”中包含此模板。

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 :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM