如何正确设置新的 Angular 6 项目答案

【问题标题】：How to properly set up a new Angular 6 project如何正确设置新的 Angular 6 项目
【发布时间】：2018-11-03 00:33:17
【问题描述】：

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

第一个是使用 Angular CLI 命令：

ng new app-name-here

第二个是使用命令：

dotnet new angular app-name-here

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

【问题讨论】：

只是对您的标题发表评论，因为您获得了反对票和近距离投票；它读起来看起来太宽泛了，所以读者可能习惯于以这种方式投票。考虑将来更具体的标题。
非常好的帖子。谢谢。

标签： angular asp.net-core .net-core angular-cli

【解决方案1】：

dotnet new angular使用的模板来自Microsoft。

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

通常您只需说出ng update 和/或关注Angular Update Guide 即可获取最新更新。然而，在主要版本之后，这是一个更大的问题——现在模板使用 Angular 5，而 Angular 6 是最新的。

模板有一些优点和缺点：

优势

您知道它可以开箱即用，这是一个“游乐场”项目的良好开端。
它包括引导程序和比角度 ng new 更有用的示例。
它还包含 WebAPI 示例代码（与 Angular 代码不同），因此您可以快速添加新的 API 控制器。

缺点

有时 Angular 会在更新之间进行重大更改。版本 5-6 就是这样一个示例，其中 .angular-cli.json 现在是 angular.json 并且格式完全不同。如果您不熟悉 Angular，这只会增加整体头痛。
ng update 似乎从来没有对我非常可靠地工作。也请查看 Angular 升级指南。
您可能不希望包含引导 css。
如果您已经有一个 Angular 项目，并且想要进行 dotnet-ify，那么它本身并不容易为您做到这一点。

由于 5>6 的重大变化，我建议现在不要使用此模板，除非是临时测试。。

对我来说，我发现最好的办法是按照以下步骤操作：

运行dotnet new angular 或dotnet new angular -o projectname 将其放在子目录中。这会让您的 Spa 模板设置将 dotnet 世界连接到 Angular 世界。
彻底清除它为您创建的 ClientApp 文件夹的内容 - 或重命名它，以便在您不熟悉 Angular 时参考示例代码
CD 到ClientApp 文件夹
使用 Angular CLI（与 Angular 团队分开安装）并运行 ng new --help 以查看所有可用选项
创建您的 Angular 应用程序。这些是我使用的选项：

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

前缀是您的自定义组件元素的开头（例如。 “名称”是创建的文件夹（将在 ClientApp 内）

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

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

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

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

【讨论】：

【解决方案2】：

新的

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

dotnet 新角度

基于 MS 提供的模板创建一个新的 .NET 核心项目。它还创建（大多数？）Angular 部分所需的文件。由于您想要一个 ASP.NET Core 后端，如果我想要一个命令解决方案，我会走这条路。我自己没用过，所以你的里程数因人而异。

手动

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

【讨论】：

【解决方案3】：

编辑（2018 年 5 月 31 日）

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

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

结束编辑（2018 年 5 月 31 日）

关于第二个问题：

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

恕我直言，最好的选择是将两者都放在同一个项目中，因为您可以从单个项目中部署和服务客户端（角度）和 API（ASP NET Core Web API 控制器），这在开发阶段非常有用，并且有助于部署。为了完成，最好的选择是混合这两种机制，您可以创建 dotnet 项目，并在其中插入 Angular 代码，添加并使用 MVC 到您的应用程序并为 Angular 应用程序提供服务。

最简单的方法是：

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

完成后转到 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 运行它，这两个命令都可以使用。

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

希望对你有帮助

胡安

编辑（2018 年 5 月 26 日）

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

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

【讨论】：