Asp.net 核心 2 和 angular 6 模板

Question

我正在寻找一个模板来使用 asp.net 核心 2.0 和 angular 6 在一个解决方案中，按 f5 键到运行应用程序。

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

谢谢

Answer 1

教程 here: 我不会使用

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

但是

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

您可以使用 Angular6.

神奇的是 .net 核心 启动新的命令行 本身并且 运行 npm 脚本 .

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 的工作项目。

我的project.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");
                }
            });
        }
    }
}

但我只有内置命令行的审美问题，你可以看看我的question here。

Answer 2

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

https://github.com/JuanGarciaCarmona/AspNetCore21Ang6Template

代码项目中也有一篇文章解释了如何使用它。

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

希望对您有所帮助。

Asp.net 核心 2 和 angular 6 模板

Asp.net core 2 with angular 6 template

asp.net

angular6