How to properly set up a new Angular 6 project

Question

On my way to learning Angular, I have come across two different ways of creating a new Angular project.

The first is using the Angular CLI command:

ng new app-name-here

The second is using the command:

dotnet new angular app-name-here

The generated projects seem very different, and there are lots of parts for me to cover. What's the difference between the two approaches? What are the pros and cons for each approach when the goal is to build a client app that will communicate with a given ASP.Net Core API?

Answer 1

The template used by dotnet new angular comes from Microsoft .

It's a frozen in time template, which has the obvious disadvantage that it is always out of date since Angular is changing ALL THE TIME.

Often you will be able to just say ng update and/or follow the Angular Update Guide to get the latest updates. However after major releases this is a bigger problem - right now the template uses Angular 5 and Angular 6 is the latest.

The template has some advantages and disadvantages:

Advantages

• You know it will work out of the box, and it's a good start for a 'playground' project.
• It includes bootstrap and a more usable sample than the angular ng new .
• It includes WebAPI sample code too (which is distinct from Angular code) so you can quickly add new API controllers.

Disadvantages

• Sometimes Angular makes MAJOR changes between updates. Version 5-6 is such an example where .angular-cli.json is now angular.json and completely different format. If you're new to angular this just increases the overall headache.
• ng update never seems to work for me very reliably. Check out the Angular upgrade guide too.
• You may not want bootstrap css included.
• If you've already got an Angular project you want to dotnet-ify it doesn't do that for you easily by itself.

Because of the major changes from 5>6 I recommend not using this template right now except for casual testing. .

For me I found the best thing to do is to follow these steps:

• Run dotnet new angular or dotnet new angular -o projectname to put it in a subdirectory. This gets your Spa template setup to connect dotnet world to angular world.
• Wipe out completely the contents of the ClientApp folder it created for you - or rename it so you can refer to the sample code if you're new to Angular
• CD to the ClientApp folder
• Use the Angular CLI (separate install from angular team) and run ng new --help to see all available options
• Create your angular app. These are the options I use:

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

The prefix is what your custom component elements begin with (eg. The 'name' is the folder created (which will be inside ClientApp)

• Run your Angular app using npm start which fires it up on port 4200 (run this from the new folder in ClientApp/sjw_website ). You can view this immediately at http://localhost:4200 which is completely separate from dotnet and running in Angular's own server.
• Modify the SPA template in startup.cs to use this line of code spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); This will proxy requests to the angular server.
• Modify the startup.cs to point to ClientApp/sjw_website (or move the files manually up a level)
• Open a second powershell to build and run (in the folder containing your dotnet project)
• Build dotnet build and run dotnet run
• Alternatively use dotnet watch run

Note that the angular project which is running under the angular ng serve development server will automatically restart when you make changes to the angular files. When using dotnet watch the dotnet server will restart when you make changes to dotnet files.

Having both open will be your best experience, preferably on a second monitor.

Note that when you do a production build it is the npm build command embedded in the csproj file that does the magic and points the output to a dist folder.

Answer 2

ng new

Creates a new angular project using the CLI. It won't create any of the backend code/projects you need

dotnet new angular

Creates a new .NET core project based on a MS provided template. It also creates (most?) of the files you will need for the Angular portion. Since you want an ASP.NET Core backend I would go this route if I wanted a one-command solution. I haven't used it myself so your mileage my vary.

Manual

You can always create an ASP.NET Core WebAPI project in Visual Studio and then ng new an application inside it. This is the route I typically take.

Answer 3

Edit (31/MAY/2018)

Today I created a DotNet Project Template that should facilitate these steps for anyone. You could try it here:

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

END Edit (31/MAY/2018)

To the second question:

What are the pros and cons for each approach when the goal is to build a client app that will communicate with a given ASP.Net Core API?

IMHO best choice is to have both in same project because you can deploy and serve the client side (angular) and the API (ASP NET Core Web API controllers) from a single project, something that is good in dev stage and facilitates deployment. To acomplish so best choice is to mix both mechanisms, you can create the dotnet project and inside it the place the angular code also insed it, add and use MVC to you app and serve the angular app.

Easiest recipe to do so is to:

1. Create a dotnet project (Empty ASP NET core Web Application) and name it XXXXXX, that can be done from Visual Studio or form command line ('dotnet new web')
2. Then, from command line go to the prevous folder and type ng new XXXXXX, that command would place everything you need inside the previously created dotnet project folder.

3. Once it finish go to angular.cli and set the output to be 'wwwroot' (instead of 'dist/XXXXXX' 4.- Your startup class should be like:

    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(); 

   } }

And then you can run it using dotnet run or ng serve, both commands work.

One thing that, at least for me is missing, is that live reloading is not working, as soon as I fix it for me I'll update this answer.

I hope it helps,

Juan

Edit (26/MAY/2018)

Regarding live reload it has been impossible to me achieve that goal by debugging from VS or running the app with dotnet run but to check styles and small but tricky customisation what I've done was to launch the web app with 'ng serve'.

If you need both, client and server up and running, because you need to call your api controllers from your client app, then you might play with environment.ts configuring your api base url and during that time run your backend from VS and your front end with ng serve. hopefully this will be solved or fixed in future VS versions or, as I've seen was requested, in newer asp net core SPA templates prepared for Angular 6