Angular CLI and ASP.NET Core Angular Template

• GitHub Repository

Introduction

You might probably know that, if you are working with Visual Studio 2017- Preview 3, and you are using .NET Core 2.0 - Preview 2, a new template is now available for creating Angular apps.

I like the way Angular-CLI does all the boilerplate and it was challenging for me to get Angular CLI and the ASP.NET's newly introduced Angular template to work together.

In this tip, I'm going to show how to set up your environment to use ASP.NET Core Angular template and yet make use of Angular-CLI.

Prerequisites

• Node.js -- I am using version 8.2.1
• Visual Studio 2017 (15.3.2 or above)
• .NET Core 2.0

Setting Up The Environment

Step 1

Create a new project, as shown in the image below:

Select Angular as the project template.

Important: Note that Angular template is available only when ASP.NET Core 2 is selected from framework dropdown on top of dialog.

In solution explorer, look for the ClientApp folder. This is the root folder for your Angular app.

Step 2

Open command prompt and type the following command:

npm install -g @angular/cli@latest

This will install Angular CLI globally.

You also need to install Angular CLI as a dev dependency. From command prompt, navigate to root folder of your project and type the following command:

npm install --save-dev @angular/cli@latest

Step 3

In solution explorer, under ClientApp folder, open app folder.

Rename app.module.shared.ts file to app.module.ts.

Step 4

In the same app folder, you will find the file app.module.browser.ts, open the file.

You will see that the path for AppModuleShared is no longer valid.

Let’s fix this as shown in the image below:

Step 5

Now open app.module.server.ts file, you will find this file inside the app folder which is inside the ClientApp folder. This file has the same issue we saw in Step 4.

Let’s fix this:

Step 6

To be able to use Angular CLI, we need .angular-cli.json file in the root folder of our project.

To do so, open command prompt.

Navigate to a location out of the current project and type the following command:

ng new default

The above command creates a new project for you in the specified location.

Step 7

From file explorer, open the newly created project and copy .angular-cli.json file.

Step 8

Go back to your web project and paste .angular-cli.json file in the root folder of the project.

Step 9

Now open .angular-cli-json file in Visual Studio and change the value of the root key from src to ClientApp; as this is the root folder of your Angular App.

Good job. You are done!

Step 10

Now let’s test it.

Open command prompt. Navigate to the components folder which is inside the app folder, and type the following command.

This is an Angular CLI command that creates a new component and registers it to app.module.ts.

ng g c student

If everything goes well, with some luck you should see something like this -- 4 new files are created and the app.module.ts file is modified automatically to register this new component.

Step 11

Go back to the solution explorer, open components folder, which is inside app folder (inside ClientApp folder), in this component folder, now you will see a new folder “student”. You will find the newly generated files from Step10 inside this folder.

Step 12

Open app.module.ts file. You will notice your component is already registered.

And that’s it!

Hope you find this useful!