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

时间:2018-05-23 22:09:45

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

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

第一种是使用Angular CLI命令:

ng new app-name-here

第二个是使用命令:

dotnet new angular app-name-here

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

3 个答案:

答案 0 :(得分:10)

dotnet new angular使用的模板来自Microsoft

这是一个冻结的时间模板,具有明显的缺点,因为Angular一直在更改ALL TIME,所以它总是过时的。

通常,您只能说ng update和/或按照Angular Update Guide来获取最新更新。但是,在主要版本发布之后,这是一个更大的问题-现在模板使用Angular 5,而Angular 6是最新的。

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

优势

  • 您知道它会立即可用,这对于“游乐场”项目来说是一个好的开始。
  • 它包含引导程序和比角度ng new更有用的示例。
  • 它还包含WebAPI示例代码(与Angular代码不同),因此您可以快速添加新的API控制器。

缺点

  • 有时Angular会在两次更新之间进行重大更改。版本5-6是这样的示例,其中.angular-cli.json现在为angular.json,并且格式完全不同。如果您是新手,这只会增加整体头痛。
  • ng update似乎从未非常可靠地为我工作。还要查看Angular升级指南。
  • 您可能不希望包含引导CSS。
  • 如果您已经有一个Angular项目,您想要进行dotnet-ify本身并不能轻松地做到这一点。

由于自5> 6以来的重大更改,我建议除临时测试外,暂时不要使用此模板。

对我来说,我发现最好的方法是执行以下步骤:

  • 运行dotnet new angulardotnet new angular -o projectname将其放在子目录中。这将使您的Spa模板设置可以将dotnet世界连接到angular世界。
  • 完全清除它为您创建的ClientApp文件夹的内容-或重命名它,以便在不熟悉Angular的情况下可以参考示例代码
  • 将CD放入ClientApp文件夹
  • 使用Angular CLI(与角度团队分开安装)并运行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到你的应用程序并提供角度应用程序。

最简单的配方是:

  1. 创建一个dotnet项目(空ASP NET核心Web应用程序)并将其命名为XXXXXX,可以从Visual Studio或表单命令行(&#39; dotnet new web&#39;)
  2. 完成。
  3. 然后,从命令行转到prevous文件夹并键入ng new XXXXXX,该命令会将您需要的所有内容放在先前创建的dotnet项目文件夹中。
  4. 完成后,转到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();
    

    }     }

  5. 然后你可以使用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模板中