部署Angular 6 ASP.NET Core应用程序

Question

部署Angular 6 ASP.NET Core应用程序

9

我已经开发了一个asp.net core 2.0 MVC应用程序，并添加了一个Angular 6前端应用程序，它们都存在于同一个项目结构中。asp.net core应用程序作为客户端Angular 6应用程序的API。

我一直在同时开发它们，并在Startup.cs文件中包含以下代码段以便在两个应用程序同时运行时进行开发：

ConfigureServices
      services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "ClientApp/dist";
      });

Configure
      app.UseSpa(spa => {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment()) {
          spa.UseAngularCliServer(npmScript: "start");
        }
      });

Angular应用程序的项目结构可以在ClientApp中找到。

我现在希望将此项目部署到IIS。所以我正在离开开发环境，因此我知道不会运行以下代码行：spa.UseAngularCliServer(npmScript: "start");。

当我通过Visual Studio发布项目并将其移动到inetpub文件夹中，就像我为其他应用程序做的那样，它没有提供我在Angular 6应用程序中开发的页面。当我尝试访问例如/ Home之类的页面时，我会收到500个内部服务器错误。

我推测这是因为我需要构建Angular应用程序（我可以通过ng build --prod完成），并将编译后的JS文件添加到HTML页面中。但是我不确定如何去做。如果有人有任何相关网页的链接，那将非常感激。或者如果您能提供任何见解，那将非常有帮助。

更新＃1：

在Startup.cs文件中，我使app.UseDeveloperExceptionPage()在生产模式下可用。

与500个内部服务器错误页面不同，我得到了异常： SPA默认页面中间件无法返回默认页面'/ index.html'，因为未找到该页面，并且没有其他中间件处理请求。 我还注意到，在发布后，ClientApp / dist文件夹不存在。我手动构建了ClientApp并将其添加到inetpub中的应用程序中。现在，我在控制台中收到错误：

runtime.a66f828dca56eeb90e02.js:1 Uncaught SyntaxError: Unexpected token <

polyfills.7a0e6866a34e280f48e7.js:1 Uncaught SyntaxError: Unexpected token <

Request:10 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/styles.169e0a841442606822c8.css".

scripts.ee7fed27c36eaa5fa8a9.js:1 Uncaught SyntaxError: Unexpected token <

main.befe6f4d3c1275f2e1b3.js:1 Uncaught SyntaxError: Unexpected token <

- Callum Osborn

@WaqasDilawarDaha 你知道我需要哪些代码才能在.Net Core 2.0上运行吗？ - Callum Osborn

让我来回答这个问题。 - Muhammad Waqas Dilawar

1

@BlackICE 我在这里找到了它：https://dzone.com/articles/create-an-application-with-angular-6-and-net-core。我还搜索了Angular 6和ASP.NET Core，出现了许多网站。 - Callum Osborn

这并不难，但你需要找到 index.html 所在的输出文件夹，并将你的网站根目录设置为该位置。 - theMayer

你解决了这个问题吗？我在使用ASP.NET Core 2.1和Angular 7时也遇到了同样的问题。这里给出的建议都没有对我起作用，它似乎总是返回index.html，即使是在脚本和样式请求中也是如此。 - Jacobson

显示剩余3条评论

3个回答

0

只需要做出这个更改，它应该适用于生产环境的IIS。

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist/client";

        });
    }

- Ngoc Nguyen Thanh

-1

Visual Studio 2019为此提供了一个项目模板，只需在启动页面的第一步中选择新项目，ASP.NET Core Web应用程序C#，输入解决方案名称，并选择Angular项目模板。您可以基于运行在.NET Core或.NET Framework下的ASP.NET Core构建解决方案。

- Stephan Kühn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muhammad Waqas Dilawar · Accepted Answer

你需要使用这段代码来适用于 ASP.NET Core 2.0，而不是你现在使用的代码。我的应用程序就是采用这种方法发布的。

        app.UseMvc(routes =>
        {
 //Remove this if you don't need it
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
              defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA 
        });

你需要在HomeController中编写一个返回View的Action。
View的代码如下：

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>