使用 AngularJS 将 ASP.NET CORE Web 应用程序发布到 IIS答案

【问题标题】：Publish ASP.NET CORE web app with AngularJS to IIS使用 AngularJS 将 ASP.NET CORE Web 应用程序发布到 IIS
【发布时间】：2016-08-10 07:25:43
【问题描述】：

我们正在编写一个新的 asp.net 核心网络应用程序（带有完整的 .net 框架），使用 angularjs 版本。 1.5.8.
我们刚刚开始使用该应用程序，所以它非常简单，只有一个页面包含一个包含学生数据的表格。
现在，当我使用 IIS Express 运行应用程序时，应用程序工作正常，数据显示出来，并且浏览器控制台中没有错误。
但是当我将应用程序发布到本地 IIS 时，它不起作用。角度视图为空，因此仅显示 _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.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 上，我收到了上面的错误消息。

什么给了？

【问题讨论】：

angularjs 找不到所需的模板文件。查看浏览器的网络选项卡。你会看到很多 404 错误。
检查是否在 project.json 的“publishOptions”部分中包含所有必需的文件

标签： c# angularjs iis asp.net-core asp.net-core-mvc

【解决方案1】：

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

【讨论】：

我将附上目录的屏幕截图，以便您帮助我确定我是否遗漏了什么。谢谢/
你可以看到这个文件夹中只有一个文件“index”，这里你应该有文件“edit.html”和“new.html”从你的源代码复制这个文件，html文件不需要编译。

【解决方案2】：

好的，找到问题的原因了。
我不知道 AngularJS 从服务器的根目录引用 urls'。因此，以下 api 调用：
$http.get("/api/students")
找不到，因为它缺少服务器根目录：“MyServer/api/students/”。
我在这里找到了解决方案：Using a Relative Path for a Service Call in AngularJS

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

【讨论】：