#Angular and Asp.Net Core 3: Faster debug cycles in Visual Studio 2019

Asp.Net Core 3 and Angular work great together. Here are a few tricks I use to have a super-fast development cycle when working on the client-side of my code. Note that this doesn’t apply to changes to c# code on your backend hosted in Asp.Net Core 3.

I assume that you have created your Angular 8+ app inside Asp.Net Core 3. If not, create one with the Create a New Project menu and choose the Angular option:

2019-11-08 09_29_03-Microsoft Visual Studio (Administrator).png

2019-11-08 09_29_40-Microsoft Visual Studio (Administrator).png

I like to run the Terminal inside Visual Studio, fewer windows to switch between. Go and install the free Extension Wack Wack.

Run Wack Wack from the View|Other Windows|Terminal menu and change the directory to the ClientApp folder.

2019-11-08 09_32_53-PluralSiteAngular - Microsoft Visual Studio.png

So that you and I are in the same version, update Angular then install all the packages by running these two commands:

ng update @angular/cli @angular/core

then

npm install

Once done we are ready.

Start up your Angular project with this command

npm start

Now, as you make changes to your Angular code and save them, the changes will instantly appear in the browser. No need to press F5 and wait for Visual Studio to connect and build.

2019-11-08 09_37_25-PluralSiteAngular - Microsoft Visual Studio.png

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s