Edward Jackson

Edward Jackson

1559099237

Debugging Angular CLI Applications in Visual Studio Code

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

For an Angular CLI application, create a debug configuration in VS Code, install the Debugger for Chrome extension, then run in debug mode.

Learn VS Code

If you’re interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.> If you’re interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.# Creating a Starter Project

To be able to test an Angular CLI application, you need an Angular CLI application :) I’ll provide the basic steps, but for more reference on how to get started look at the Angular CLI page.

First, you’ll need to install the Angular CLI.

npm install -g @angular/cli

After that finishes, you’ll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

ng new my-app

Open the project in VS Code and you should see the following.

Now, that you’ve got your new fancy Angular app, go ahead and run it to make sure everything looks right.

ng serve

Should look like this.

Creating Debug Configuration

Assuming you’ve made it this far, we are ready to start debugging! Before we do, however, it’s worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says “No Configurations”.

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Then choose Chrome.

You should get the following configuration created for you.

The only thing we need to do is update the port from 8080 to 4200.

Let’s Debug

Now we’re ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

With this up and running, you can set a breakpoint in your App.component.ts. Open up your App.component.ts and add a breakpoint inside of the component by clicking in the gutter (to the left of the line numbers). Should look like this.

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

#angular #visual-studio

What is GEEK

Buddha Community

Debugging Angular CLI Applications in Visual Studio Code

COMO USAR e trabalhar com Code Review no Visual Studio Code

Não é todo programador que gosta de compartilhar o seu trabalho ou até mesmo receber feedbacks de como o seu código foi escrito, mas o Code Review é cada vez mais comum em empresas do mundo todo.

Conheça uma extensão para Visual Studio Code e comece a trabalhar com Code Review em seu próximo projeto. Essa é a sua chance de saber COMO USAR e trabalhar com Code Review no Visual Studio Code.

#visual studio code #code review #visual studio #code

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Brain  Crist

Brain Crist

1596975120

Writing Visual Studio Extensions with Mads - Episode 1: Item Templates

Join Mads Kristensen from the Visual Studio team each week as he builds extensions for Visual Studio live!

#visual studio code #visual studio #code #microsoft #visual studio extensions

Brain  Crist

Brain Crist

1597032000

User Snippets (Code Shortcuts) in Visual Studio Code

Hello, my friends and fellow developers, this video is all about User Snippets. That means the Snippets (Code Shortcuts) that you can make for yourself. It is a really amazing feature. I hope you like this video

Let me know in the comments below if you want more Visual Studio Code videos or any other videos. And like the video, if you like it.

#visual studio code #visual studio #code

Sadie  Cassin

Sadie Cassin

1598109060

How to Develop an ASP.NET Core Application Using Visual Studio Code

Visual Studio Code (VS Code) is a free, cross-platform, and lightweight source-code editor developed by Microsoft for Windows, Linux, and Mac operating systems. It is a source-code editor while Visual Studio is an IDE (integrated development environment). VS Code supports development operations such as debugging, task running, and version control, like Visual Studio.

In this blog, we will learn about developing, debugging, testing, and deploying ASP.NET Core applications using Visual Studio Code.

Prerequisites

The following packages should be installed in your machine:

Install essential plugins

  1. Install the C## extensions, which are required for development of ASP.NET Core applications. To open the list of extensions, please select the extensions icon on the left side of menu or use the Ctrl + Shift + X shortcut key. Refer to the following screenshot.
  2. Install C## Extensions
  3. Then, install the NuGet Gallery extension to add and update NuGet packages in the VS Code.
  4. Install the NuGet Gallery Extension

#asp.net core #visual studio code #web #productivity #visual studio #vs code #web development