How to start Angular development in VS Code
There is one way to debug Angular code - look to page My Angular learning conspectus. But in this page I describe another workflow with huge Angular project placed in separate folder and developing and debugging with VS Code. This is not simple project because this project contains 129 components.
So, first step is install VS Code. Second step is install Node.JS.
Next step is install Angular CLI (to special folder)
Next step is install Npm packages (npm install)
Next step is first attempt to open Angular Server (ng serve --open)
Next step is most important, in my case Backend API opened in port 55278, but Angular server listen port 4200. And send request to Backend to port 4200.
Of course, Backend is nothing in port 4200.
So, we can setup place of Backend in proxy.conf.json.
And start Angular server with proxy: ng serve --open --proxy-config proxy.conf.json
If Angular server can found Backend, it's a great news.
And we can going farther - to Vs Code.
Next step is tune VS code to debugging Angular frontend. Firstly we can install Browser Remote control.
Next step is something windows security trash allow start Browser under controlling environment.
Next step is prepare launch.json to allow VS Code to launch project with remote browser control.
If all steps done correctly we can debugging Angular project.
We can also install various other Angular services.
BTW, When I open this project first time, all this project compile in VS Code with mistake. Because needed imports is absent. But in runtime this mistake no mater, frontend working with this mistake correctly. Later I fix this trouble by updating VS Code and Angular service.
AngularTypesctiptLearning context:
DevEnvironment context:
- (2024) Best REST client for Node and VS.CODE #DevEnvironment
- (2023) Virtualization on my developer computer (ASUS PRIME B550-PLUS, AMD AM4 Ryzen 7 5700G). #DevEnvironment
- (2023) Node.JS Configuration - set Angular, Typescript, Nativescript, NPM custom location. #DevEnvironment
- (2022) How to create SSL endpoint to NGINX reverse proxy with Basic AU #Ssl #Servers #DevEnvironment
- (2022) How to start Angular development in VS Code #Angular #DevEnvironment
- (2022) How to start WebDevelopment on Typescript with Lite-server and Webpack server #AngularTypesctiptLearning #DevEnvironment
- (2021) Optimize windows performance by Junction #DevEnvironment
- (2021) Prepare to using VS2019 (SQLite, MSI-Installer and so on) #DevEnvironment
- (2021) How to debug Android frontend #Android #DevEnvironment
- (2021) Retrofit test with interceptor, clear communication and show data to TextView #Android #Java #DevEnvironment
- (2021) Use Fiddler as reverse proxy to isolate microservice for trace request from Redux frontend and to Amazon DynamoDB and debug SignalR hub #Front #Cloud #DevEnvironment
- (2021) LibVirt Net Core wrapper test on production QEMU/KVM server. #Kvm #DevEnvironment
- (2020) How to debug SignalR application in Net Core 3.1 #DevEnvironment #NetCoreBackend
- (2020) My workplace in Kharkov #DevEnvironment
- (2019) WSL - integrated Linux environment for Windows 10 #Servers #DevEnvironment
- (2019) Android Studio Requirements (vmx|sse|svm CPU flags) #Android #DevEnvironment
- (2019) How to define Min and Max .NET framework version for application #DevEnvironment
- (2019) How to publish VS project templates to Github and Visual Studio Marketplace #Git #DevEnvironment
- (2018) Remote debugging #DevEnvironment
- (2018) VS2017 Plugins (Resolve Unused References & XPath Tools) #DevEnvironment
- (2018) Install Google Authenticator on desktop to pass Two-factor authentication #DevEnvironment # #Authentication
- (2018) My working environment 2018 in Windows and Linux #DevEnvironment
- (2018) Remove Unized Reference Plugin. #DevEnvironment
- (2017) TeamViewer unatended access vs AnyDesc. #DevEnvironment
- (2017) Налаштування роутерів у трьох місцях, де я працював у 2017-му році. #DevEnvironment #Device #Travel
- (2017) Оффлайнові копії Windows. #Linux #DevEnvironment
- (2017) Можливості різноманітних фриварних Compare SQL-Database tools. #DevEnvironment
- (2016) My Burgas World #Travel #DevEnvironment
- (2013) My working environment in Burgas #Travel #DevEnvironment
- (2013) Two opposite Visual Studio Debugger mode. #DevEnvironment
- (2012) VS2010 package manager. #DevEnvironment
- (2010) Знакомство с Visual Studio 2010 #DevEnvironment #NetLearning
- (2009) Рекомендую обфускатор #DevEnvironment
- (2006) Моя девелоперская среда #DevEnvironment
- (2006) Установка ORCAS. #DevEnvironment #NetLearning
- (2006) Моя девелоперская среда 2006 #DevEnvironment
- (2005) Работа с Team Foundation Server. #Servers #DevEnvironment
- (2005) Мое первое знакомство с ASP2 и VS2005. #NetLearning #DevEnvironment
- (2004) MS HELP 2 - Document Explorer и новый формат файлов HxS. #DevEnvironment
- (2003) IDE седьмой студии и надстройки к нему. #NetLearning #DevEnvironment
- (2002) Как я осваивал .NET-студию #DevEnvironment #NetStart
Order a job
)
|
|