如何正确设置一个新的Angular 6项目

Question

在我学习Angular的过程中，我遇到了两种创建新Angular项目的方法。

第一种是使用Angular CLI命令：

ng new app-name-here

第二个是使用命令：

dotnet new angular app-name-here

生成的项目看起来非常不同，我需要介绍很多部分。 这两种方法有什么区别？ 当目标是构建与给定ASP.Net Core API通信的客户端应用程序时，每种方法的优缺点是什么？

Answer 1

dotnet new angular使用的模板来自微软 。

这是一个冻结的时间模板，其明显的缺点是它总是过时，因为Angular一直在变化。

通常，您只需说ng update和/或按照Angular更新指南获取最新更新即可。 然而，在主要版本发布之后，这是一个更大的问题 - 现在模板使用Angular 5，而Angular 6是最新的。

该模板有一些优点和缺点：

好处

• 你知道它可以开箱即用，对于一个“游乐场”项目来说这是一个很好的开始。
• 它包括bootstrap和比angular ng new更有用的样本。
• 它还包括WebAPI示例代码（与Angular代码不同），因此您可以快速添加新的API控制器。

缺点

• 有时Angular会在更新之间进行MAJOR更改。 版本5-6就是这样一个例子，其中.angular-cli.json现在是angular.json ，格式完全不同。 如果你是刚接触角度，这只会增加整体头痛。
• ng update似乎永远不会对我有效。 查看Angular升级指南。
• 您可能不希望包含bootstrap css。
• 如果你已经有了一个Angular项目，你想要dotnet-ify它不会轻易地为你做到这一点。

由于5> 6的主要变化，我建议不要立即使用此模板，除非进行临时测试。 。

对我来说，我发现最好的办法是遵循以下步骤：

• 运行dotnet new angular或dotnet new angular -o projectname将其放在子目录中。 这将获得您的Spa模板设置，以将dotnet世界连接到角度世界。
• 完全擦除它为您创建的ClientApp文件夹的内容 - 或重命名它，以便您可以参考示例代码，如果您是Angular的新手
• CD到ClientApp文件夹
• 使用Angular CLI （从angular团队单独安装）并运行ng new --help以查看所有可用选项
• 创建你的角度应用。 这些是我使用的选项：

ng new sjw_website --routing --style=scss -prefix=sjw

前缀是您的自定义组件元素的开头（例如，'name'是创建的文件夹（将在ClientApp中）

• 使用npm start运行你的Angular应用npm start ，它在端口4200上npm start它（从ClientApp/sjw_website的新文件夹运行它）。 您可以立即在http：// localhost：4200上查看此内容，该内容与dotnet完全分开并在Angular自己的服务器中运行。
• 修改startup.cs的SPA模板以使用这行代码spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); 这将代理对角度服务器的请求。
• 修改startup.cs以指向ClientApp/sjw_website （或手动将文件移动到某个级别）
• 打开第二个powershell来构建和运行（在包含你的dotnet项目的文件夹中）
• 构建dotnet build并运行dotnet run
• 或者使用dotnet watch run

请注意，在更改角度文件时，角度ng serve开发服务器下运行的角度项目将自动重新启动。 使用dotnet watch时，当您对dotnet文件进行更改时，dotnet服务器将重新启动。

打开两个将是您的最佳体验，最好是在第二台显示器上。

请注意，当您执行生产构建时，嵌入在csproj文件中的npm build命令会执行魔术并将输出指向dist文件夹。

Answer 2

新的

使用CLI创建新的角度项目。 它不会创建您需要的任何后端代码/项目

dotnet新角度

基于MS提供的模板创建新的.NET核心项目。 它还会创建（大多数？）Angular部分所需的文件。 既然你想要一个ASP.NET核心后端，我会想要一个单命令解决方案。 我自己没有用过，所以你的里程我的变化。

手册

您始终可以在Visual Studio中创建ASP.NET Core WebAPI项目，然后在其中ng new一个应用程序。 这是我通常采取的路线。

Answer 3

编辑（201年5月31日）

今天我创建了一个DotNet项目模板，可以为任何人提供这些步骤。 你可以在这里试试：

AspNetCore2Ang6Template： https ： //github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

结束编辑（201 / MAY / 2018）

对第二个问题：

当目标是构建与给定ASP.Net Core API通信的客户端应用程序时，每种方法的优缺点是什么？

恕我直言最好的选择是同时拥有两个项目，因为您可以从单个项目部署和服务客户​​端（角度）和API（ASP NET核心Web API控制器），这在开发阶段是很好的并且便于部署。 为了实现这么好的选择是混合两种机制，你可以创建dotnet项目，在其里面角度代码也包含它的地方，添加和使用MVC到你的应用程序并提供角度应用程序。

最简单的配方是：

1. 创建一个dotnet项目（空ASP NET核心Web应用程序）并将其命名为XXXXXX，可以从Visual Studio或表单命令行（'dotnet new web'）完成
2. 然后，从命令行转到prevous文件夹并键入ng new XXXXXX，该命令会将您需要的所有内容放在先前创建的dotnet项目文件夹中。

3. 一旦完成，请转到angular.cli并将输出设置为'wwwroot'（而不是'dist / XXXXXX'4 .-您的启动类应该是：

    public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseMvc(); app.UseDefaultFiles(); app.UseStaticFiles(); 

   }}

然后你可以使用dotnet run或ng serve来运行它，这两个命令都可以运行。

有一件事，至少对我来说是缺失的，是实时重新加载不起作用，一旦我为我修复它我会更新这个答案。

我希望它有所帮助，

胡安

编辑（26 / MAY / 2018）

关于实时重新加载，我无法通过从VS调试或使用dotnet运行运行应用程序来实现这一目标，但是检查样式和小而棘手的自定义我所做的是使用'ng serve'启动Web应用程序。

如果您需要同时启动和运行客户端和服务器，因为您需要从客户端应用程序调用api控制器，那么您可以使用environment.ts配置您的api基本URL，并在此期间从VS和您的前端运行您的后端用ng服务结束。 希望这将在未来的VS版本中得到解决或修复，或者正如我所见，在为Angular 6准备的更新的asp net core SPA模板中