如何正确设置一个新的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来自Microsoft.

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

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

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

好处

• 你知道它可以开箱即用,对于一个"游乐场"项目来说这是一个很好的开始.
• 它包括bootstrap和比角度更有用的样本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中)

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

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

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

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

Answer 2

新的

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

dotnet新角度

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

手册

你总是可以在Visual Studio中的ASP.NET核心的WebAPI项目,然后ng new应用程序里面它.这是我通常采取的路线.