1 Introduction

I was recently impressed by the “Programmer’s Growth Lesson”, which talked about how programmers build skill trees. As a background development programmer, I feel that the skills are single, let alone the skill tree. As a qualified background programmer, you must master at least one static language, one dynamic language and one front-end language. The static language C# is not proficient, and the dynamic language Python is just getting started. But the front end is blank, although I have learned about jquery and bootstrap, but because the project has nothing to do, I have already forgotten everything.

In recent years, the front-end framework has become popular, and Web development has become a major trend that cannot be ignored. Under this trend, the front-end framework is ignorant and obviously obsolete. So I decided to pick up the front end and chose to learn Angular to make up for my front-end blanks. Plan to develop a task list using .Net Core + Angular.

2. Environmental preparation

.Net Core already supports Angular templates, we only need dotnet new angular -n YourAppNameto create an angualr project template.
Install in order:


  1. Node.js

    (installed by default, you can install NPM)
  2. Execute npm install -g @angular/cliand install angular cli.
  3. Development Tools:
    Visual Studio Code
  4. Install the latest
    .Net Core SDK

    , current version V2.1.101.

3. Create and start the project

Execute dotnet new angular -n Learning.NetCore.Angular, after creating the project, open the folder with VS Code. The project structure is shown below. ClientApp is the front-end part written by Angular, which realizes the separation of front and back ends.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_1.png

Project structure

After opening, we need to install the following VS Code extensions so that we can successfully develop and debug.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_2.png

Expansion

Later, the bottom right corner will pop up a window to remind us if we need to debug the project, as shown below.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_3.png

Image.png

Click Yes and a .vscodefolder will be created for us in the project . It contains two files, one is launch.json and the other is tasks.json. Where launch.json is used to configure debugging related parameters. Tasks.json is used to configure the default build tasks.

If the pop-up window is not popped up, we can also add it as shown below.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_4.gif

Add debug configuration.gif

The first time we run, we first perform dotnet buildto verify that the project can be built correctly. It will restore the npm dependency, which may take a few minutes. After npm depends on the installation, it will run again soon. After the build is successful, execute the dotnet runrunning project.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_5.png

The browser can see the effect below by visiting
http://localhost:5000

.

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_6.gif

Demo.gif

Then press the keyboard to Ctrl+Cstop running.

4. Project commissioning

Because the third step we have created the default debug configuration. Direct F5 running, you can debug the .Net Core code. But how do we coordinate Angular code? This is the focus of this section. We need to modify our launch.json.

Open launch.json and click Add Configuration, then select Chrome:Launch and add a node to the profile as shown below:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

We need to make the corresponding changes. Because the default binding port of the .Net Core project is 5000, we need to change the port number of the above url to 5000. And map webRoot to the wwwroot directory. At the same time we want to enable sourceMaps. The modifications are as follows:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceFolder}/wwwroot",
    "sourceMaps": true
},

So far we have successfully added a task to launch Chrome to debug our angular. Need a simple three-step:

  1. Terminal execution dotnet run, running project
  2. Switch to the debug button, select the Launch Chrome configuration, and run F5.
  3. Breakpoint ts file.

The steps are as follows:

Debugging.gif

But at this time we still can’t make the joint adjustment. We need to start the project first, then select a specific debug configuration for debugging. That is, only one of Angualr and .NetCore can be debugged at the same time. So how do you tie the two? ? ?

5. Joint adjustment of Angualr&&.NetCore

Also we have to modify launch.json to add a compounds configuration node. This node allows us to start multiple debugging tasks at the same time. The configuration is as follows:

"compounds": [
        {
            "name": ".Net Core + Chrome",
            "configurations": [".NET Core Launch (web)","Launch Chrome"]
        }
    ],
"configurations": [
//省略
]

The final configuration is as follows:

"compounds": [
    {
        "name": ".NetCore+Chrome",
        "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]
    }
],
"configurations": [
    { 
        // chrome debugger 
    },
    { 
        // .Net Core Launch (web)
    },
]

This configuration is very simple, that is, the debugging tasks we just configured can be assembled together.

Go back to the debugging interface, select .NetCore+Chrome , F5 to run, you can break points and debug in both angular and .net core code. As shown below:

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_7.gif

Joint tone.gif

Careful you may find that although you can complete the joint adjustment in this way, it is still a bit small. Two debug tasks will launch a web page window. Is there any way to solve it? Yes, we add another .Net Core Launch (console)debug task, this debug task will not launch the web page window. Then assemble the .Net Core Launch (console)sum Launch Chrometogether. The specific configuration looks at the following figure:

ASP.NET_Core__basic_series(6)_VS_Code_and_Angular__and_.NetCore_8.gif

Joint 2 configuration.gif

6. Finally

This article is only a tutorial on VS Code development and debugging techniques, I hope to help you.

Orignal link:https://www.jianshu.com/p/e27a614cdab0