Click here to Skip to main content
14,829,981 members
Articles / Web Development / ASP.NET / ASP.NET Core
Tip/Trick
Posted 1 Oct 2017

Stats

47.6K views
11 bookmarked

Angular CLI and ASP.NET Core Angular Template

Rate me:
Please Sign up or sign in to vote.
4.04/5 (10 votes)
1 Oct 2017CPOL3 min read
How to set up your environment to use Angular CLI with your ASP.NET Core 2.0 Angular template

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:

Image 1

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.

Image 2

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

Image 3

Step 2

Open command prompt and type the following command:

npm install -g @angular/cli@latest

Image 4

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

Image 5

Step 3

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

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

Image 6

Image 7

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.

Image 8

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

Image 9

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.

Image 10

Let’s fix this:

Image 11

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

Image 12

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.

Image 13

Step 8

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

Image 14

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.

Image 15

Image 16

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

Image 17

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.

Image 18

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.

Image 19

Step 12

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

Image 20

And that’s it!

Hope you find this useful!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Iman Memarpour
Software Developer Dealertrack
Canada Canada
No Biography provided

Comments and Discussions

 
SuggestionASP.Net Core and new Angular-cli template Pin
Member 115500224-Apr-18 0:03
MemberMember 115500224-Apr-18 0:03 
QuestionLatest fixes - 2018 april (loader.getOptions error) Pin
Benyi Robert27-Mar-18 21:13
MemberBenyi Robert27-Mar-18 21:13 
GeneralThank You! Pin
Priyanka Kale20-Feb-18 1:01
MemberPriyanka Kale20-Feb-18 1:01 
SuggestionYou do not need to rename app.shared.module.ts file, instead do this - Pin
Syed Ali - Mediasteam7-Feb-18 6:02
MemberSyed Ali - Mediasteam7-Feb-18 6:02 
QuestionRuntime Error- NodeInvocationException: alert is not defined Pin
Member 1046359021-Jan-18 18:58
MemberMember 1046359021-Jan-18 18:58 
Questionng serve Pin
vojasnbg@gmail.com17-Jan-18 6:39
Membervojasnbg@gmail.com17-Jan-18 6:39 
Questionerror when create component Pin
Hatem ElShenawy10-Nov-17 23:49
MemberHatem ElShenawy10-Nov-17 23:49 
AnswerRe: error when create component Pin
Member 1352719217-Nov-17 6:30
MemberMember 1352719217-Nov-17 6:30 
PraiseExcellent Pin
Uwe Hein8-Nov-17 3:06
MemberUwe Hein8-Nov-17 3:06 
QuestionWhat about Dependencies? Pin
basil1218-Oct-17 10:32
Memberbasil1218-Oct-17 10:32 
Generalvery informative Pin
Member 134418772-Oct-17 14:05
MemberMember 134418772-Oct-17 14:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.