将带有AngularJS的ASP.NET CORE Web应用程序发布到IIS

Question

我们正在编写一个新的asp.net core Web应用程序（使用完整的.NET框架），使用AngularJS ver.1.5.8。
目前，我们只是开始了这个应用程序，所以非常简单，只有一个包含学生数据表格的页面。
现在，当我使用IIS Express运行应用程序时，应用程序可以正常工作，数据被显示，并且浏览器控制台没有错误。
但是，当我将应用程序发布到本地IIS时，它却无法工作。Angular视图为空，只显示_layout。
我已经尝试了https://docs.asp.net/en/latest/publishing/iis.html中描述的步骤，但是像我所说的，它不起作用。
这里是我正在使用的代码：

Program.Main():

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

            host.Run();
        }  

site.js（Angular部分）：

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;
                });
        });  

这是一个已部署应用程序的图像： 以及Chrome控制台中的错误：

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)  

奇怪的是，使用IIS Express一切都正常，但使用IIS却出现了上面的错误信息。

为什么会这样呢？

- ashilon

---

AngularJS 找不到所需的模板文件。请查看浏览器的网络选项卡。您会看到很多 404 错误。 - scokmen

请在 project.json 文件的 "publishOptions" 部分检查是否包含了所有必需的文件。 - Set

Answer 1

错误代码为404，是因为您的模块无法加载模板，请检查编译版本中是否包含这些模板，它们应该在“html/students/”或“html/home/”目录下。

- Kev

---

我会包含一个目录的截图，这样你就可以帮我确定是否有遗漏。谢谢。 - ashilon

正如您在此文件夹中所看到的，只存在一个名为“index”的文件。在这里，您应该拥有“edit.html”和“new.html”文件。请从您的源代码中复制这些文件，HTML文件不需要编译。 - Kev

Answer 2

好的，找到了问题的原因。
我不知道AngularJS从服务器根目录引用url。所以，以下api调用：
$http.get("/api/students")
无法找到，因为它缺少服务器根目录："MyServer/api/students/"。
我在这里找到了解决方案：在AngularJS中使用相对路径进行服务调用

感谢大家的回答。他们在其他方面帮助了我 :)

- ashilon