The Angular CLI tool is a great utility for getting an Angular project off the ground and running.

The downside from a .NET developers point of view is that if you are developing the backend of your system using .NET Core with Visual Studio you might have ended up with two separate projects. However, with a bit of tweaking it is possible the get the Angular CLI project to work inside the .NET Core. Here’s how:

Step 1

Create a .NET Core 2.0 Web API Project in Visual Studio.

Step 2

Use the Angular CLI to create a separate project with the “ng new” command

(Instructions for the Angular CLI can be found here)

Wait for it to finish installing all the required packages.

Step 3

Copy all the files and folders from the newly created CLI Angular project folder into the folder of the Core Project. You should end up with something like this:

Visual Studio should pick up the newly added files and folders (except for the node_modules folder) but if not, turn on the “Show all files” option and add them in.

Step 4

Open the .angular-cli.json file and change the outDir option to “wwwroot”

Then edit the tsconfig.json file and set the outDir option to be “./wwwroot/out-tsc”

You can then delete the dist folder from the solution.

You might also want to delete the .editorconfig file to stop it overwriting your normal editor options.

Step 5

We now need to get the Visual studio solution to load the index.html file by default.

In the STartup.cs file add the following code:

app.Use(async (context, next) =>

            {

                await next();

                if (context.Response.StatusCode == 404 &&

                    !Path.HasExtension(context.Request.Path.Value) &&

                    !context.Request.Path.Value.StartsWith("/api/"))

                {

                    context.Request.Path = "/index.html";

                    await next();

                }

            });

app.UseStaticFiles();

to the Configure function

it should now look a bit like this

This will cause any request that doesn’t match an existing file and is not part of the Web API to server up index.html instead.

Step 6

Now have the Angular CLI build the project with the “ng build -w” command. The -w switch will make the CLI check for change and automatically rebuild it.

It will also show any errors, etc.

Step 7

Finally change the launch settings file so that the launch URL is blank.

Now just run the Visual Studio project and it should server up the Angular application.

At Dataworks we enable the perfect hybrid of configurable off the shelf toolsets and custom software development to deliver innovative solutions to match your specific business process requirements. This ensures we are the best at what we do.

If you would like to discuss how we can use our experience and expertise to deliver real benefits to your business please Contact Us today or call us on 051 878555.