在学习Angular的过程中,我遇到了两种创建新Angular项目的方法。
第一种是使用Angular CLI命令:
ng new app-name-here
第二个是使用命令:
dotnet new angular app-name-here
生成的项目看起来非常不同,我需要介绍很多部分。 这两种方法有什么区别?当目标是构建与给定ASP.Net Core API通信的客户端应用程序时,每种方法的优缺点是什么?
答案 0 :(得分:10)
dotnet new angular
使用的模板来自Microsoft。
这是一个冻结的时间模板,具有明显的缺点,因为Angular一直在更改ALL TIME,所以它总是过时的。
通常,您只能说ng update
和/或按照Angular Update Guide来获取最新更新。但是,在主要版本发布之后,这是一个更大的问题-现在模板使用Angular 5,而Angular 6是最新的。
模板具有一些优点和缺点:
优势
ng new
更有用的示例。缺点
.angular-cli.json
现在为angular.json
,并且格式完全不同。如果您是新手,这只会增加整体头痛。ng update
似乎从未非常可靠地为我工作。还要查看Angular升级指南。由于自5> 6以来的重大更改,我建议除临时测试外,暂时不要使用此模板。。
对我来说,我发现最好的方法是执行以下步骤:
dotnet new angular
或dotnet new angular -o projectname
将其放在子目录中。这将使您的Spa模板设置可以将dotnet世界连接到angular世界。ClientApp
文件夹的内容-或重命名它,以便在不熟悉Angular的情况下可以参考示例代码ClientApp
文件夹ng new --help
以查看所有可用选项 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
请注意,对角度文件进行更改时,在角度ng serve
开发服务器下运行的角度项目将自动重新启动。使用dotnet watch
时,当您更改dotnet文件时,dotnet服务器将重新启动。
最好同时打开两个显示器,这是最好的体验。
请注意,当您进行生产构建时,嵌入在npm build
文件中的csproj
命令会产生魔力并将输出指向dist
文件夹。
答案 1 :(得分:9)
ng new
使用CLI创建一个新的角度项目。它不会创建您需要的任何后端代码/项目
dotnet new angular
基于MS提供的模板创建新的.NET核心项目。它还会创建(大多数?)Angular部分所需的文件。既然你想要一个ASP.NET核心后端,我会想要一个单命令解决方案。我自己没有使用它,所以你的里程数我的变化。
手册
您始终可以在Visual Studio中创建ASP.NET Core WebAPI项目,然后在其中{{1}}创建应用程序 。这是我通常采取的路线。
答案 2 :(得分:3)
编辑(31 / MAY / 2018)
今天我创建了一个DotNet项目模板,可以为任何人提供这些步骤。你可以在这里试试:
<强> AspNetCore2Ang6Template:强> https://github.com/JuanGarciaCarmona/AspNetCore2Ang6Template
END编辑(31 / MAY / 2018)
第二个问题:
目标是构建时,每种方法的优缺点是什么 一个客户端应用程序,它将与给定的ASP.Net Core API进行通信?
恕我直言最佳选择是同时拥有两个项目,因为您可以从单个项目部署和服务客户端(角度)和API(ASP NET核心Web API控制器),这在开发阶段是有益的部署。要完成这么好的选择就是混合两种机制,你可以创建dotnet项目,在其里面角色代码也加入它,添加和使用MVC到你的应用程序并提供角度应用程序。
最简单的配方是:
完成后,转到angular.cli并将输出设置为&#; wwwroot&#39; (而不是&#39; dist / XXXXXX&#39; 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运行运行应用程序来实现这一目标,但检查样式和小而棘手的自定义我所做的是用&启动Web应用程序#39; ng serve&#39;。
如果您需要同时启动和运行客户端和服务器,因为您需要从客户端应用程序调用api控制器,那么您可以使用environment.ts配置您的api基本URL并在此期间从VS运行您的后端和你的前端服务。希望这将在未来的VS版本中解决或修复,或者,正如我所看到的那样,在为Angular 6准备的更新的asp net core SPA模板中