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

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 2

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.