asp.net - Asp.net core 2 与 angular 6 模板

Question

我正在寻找一个模板，以在一个解决方案中使用 angular 6 的 asp.net core 2.0，并使用 f5 来运行应用程序。

你能帮忙找到这样的请求吗？

谢谢

Answer 1

教程 在这里： 我不会使用

Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final

但

Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0

您可以使用Angular6。

神奇的是 .net 核心自己启动新的命令行并运行 npm script。

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

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

npm start默认情况下是ng serve.

我确实有使用 Angular6 和 Core 2 的工作项目。

我的项目.csproj

...
<PropertyGroup>
  <TargetFramework>netcoreapp2.0</TargetFramework>
  <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
  <IsPackable>false</IsPackable>

  <SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.6" />
  <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.0.0" />
</ItemGroup>
...

和 Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Microsoft.AspNetCore.SpaServices.AngularCli;


namespace AngularSPA
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

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

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

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

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

但我只有内置命令行的审美问题，你可以在这里看到我的问题。

Answer 2

我创建了一个，它在 GitHub 上，它可能是一个很好的起点，但它并不完美，它应该会在接下来的几个月里成长和发展......

https://github.com/JuanGarciaCarmona/AspNetCore21Ang6Template

Code Project 中还有一篇文章解释了如何使用它。

https://www.codeproject.com/Articles/1246748/Angular-within-ASP-NET-Core

我希望它有所帮助。