Creating and troubleshooting an Angular 7 project in Visual Studio 2017

After setting up my angular7 project with the ng new my-app command (following the steps at https://angular.io/guide/setup-local), I wanted to continue developing and debugging using Visual Studio 2017 (not Visual Studio Code).

When attempting to use Visual Studio, I followed these steps:

File -> Open -> Website (and opened the application folder)

https://i.sstatic.net/9galA.png

However, when I tried to "Start Debugging" or "Start without Debugging," I encountered an "HTTP Error 403.14 - Forbidden" page https://i.sstatic.net/BSz7h.png

I am aware that Visual Studio has an option to create an Angular application, but this would include C# and .NET bindings which I don't require since I want a pure Angular 7 app with pure HTML.

Do I need to configure anything in particular to successfully debug and run the app through Visual Studio?

Answer №1

If you're looking to integrate Angular with .Net Core, there's a handy template available for your project.

For debugging TypeScript, you can refer to this resource. It's a comprehensive guide, so make sure to check it out for all the details you need.

Cheers!

Answer №2

Access the website folder path using the command prompt. Enter "npm start" in the terminal. Navigate to your file and insert the command debugger;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different or improved strategy for conditional rendering in Angular

Hey there! I've got a few *NgIf conditions in my template that determine which components (different types of forms) are displayed/rendered. For example, in one of my functions (shown below) private _onClick(cell:any){ this._enableView = fals ...

Validation with React Hooks does not function properly when used on a controlled component

I've recently started using react hook form and I've created a custom component based on material ui's autocomplete. The issue I'm facing is that react hook form isn't validating the field at all. Let me show you how the setup look ...

Designing a user interface for unlimited nested components with optional properties

I am currently working on creating an interface for the specific object type shown below. "Condition": { "And": { "Or": { "userData": [ { "name": "Alex", &q ...

Error connecting to Firebird using the .NET client due to a System.BadImageFormatException issue

Encountering the same exception repeatedly when attempting to establish a connection with Firebird SQL. Suspicions arise regarding the accuracy of the connection string provided. System.BadImageFormatException: 'Attempted to load a program with an inc ...

Angular patch value not functioning properly after initial use

Whenever I click on the edit icon, I want the form field to populate. It works correctly the first time, but subsequent clicks on different icons do not update it. However, if I hit the cancel button and then click on any edit button again, it works fine. ...

Add the slide number and total count in between the navigation arrows of the owl carousel

In my Angular application, I am utilizing an ngx owl carousel with specific configurations set up as follows: const carouselOptions = { items: 1, dots: false, nav: true, navText: ['<div class='nav-btn prev-slide'></div>' ...

Consolidate all REST service requests and match the server's response to my specific object model

My goal was to develop a versatile REST service that could be utilized across all my services. For instance, for handling POST requests, the following code snippet demonstrates how I implemented it: post<T>(relativeUrl: string, body?: any, params?: ...

Sending Angular base64 image data to the server

I am encountering an issue while attempting to upload a base64 image from Angular to ExpressJS. The image is being created using html2canvas to generate the base64 representation. When I try to upload the imageData in its current format, I receive an error ...

Create a custom API that is able to send requests to a different API

I am currently working with an existing API that needs to fetch data from another external API. What is the best approach to achieve this? I attempted to use HTTPClient for this purpose, but I am encountering difficulties in making it work. The error mess ...

The problem within the nebular modules, such as 'nb-card' and 'nb-stripper', is causing issues

Struggling with using nebular in an Angular project - the nb-card component seems to be causing issues for me. Here is the error message I keep encountering. Any advice on how to resolve this? ERROR in src/app/kyc/documentverification/documentverification ...

Form for creating and updating users with a variety of input options, powered by Angular 2+

As I work on creating a form, I encounter the need to distinguish between two scenarios. If the user selects 'create a user', the password inputs should be displayed. On the other hand, if the user chooses to edit a user, then the password inputs ...

Exploring Angular 4: Performing tests on a component containing another component

I am currently conducting testing on my Angular application: ng test Below is the content of my html file (page-not-found.component.html): <menu></menu> <div> <h4> ERROR 404 - PAGE NOT FOUND </h4> </div> Afte ...

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Imagine this scenario: https://i.stack.imgur.com/cliKE.png I am looking to determine the size of the red box within the textarea. Specifically, I want to measure the dimensions of the text itself, not the dimensions of the entire textarea. The HTML code ...

what kind of bespoke entity in TypeScript

Exploring typescript for the first time, I have constructed this object: const startingState = { name: { value: "", error: false }, quantity: { value: 0, error: false }, category: "Grocery& ...

What could be causing the lack of updates to my component in this todo list?

Based on my understanding, invoking an action in MobX should trigger a rerender for the observer. However, when I call the handleSubmit method in my AddTask component, it doesn't cause the TaskList observer to rerender. Should I also wrap AddTask in a ...

Asp.Net Core Ajax issue: Pagnation not refreshing the target

This is a straightforward issue! My partial loads correctly using ajax to apply filters and sorting. However, the pagination links send the correct URL, and the response is the desired page but it doesn't update or replace what's currently displa ...

Error TS2322: The object with properties "ready: false" and "session: null" cannot be assigned to the type "Readonly<S & withAuthState>"

Here is the interface I'm currently working with: export interface withAuthState { ready: boolean, session: any } Additionally, I have developed the following Higher Order Component (HOC): const withAuth = <P extends withAuthProps, S extends ...

Steps to resolve the issue of being unable to destructure property temperatureData from 'undefined' or 'null' in a React application without using a class component

CODE: const { temperatureData } = state; return ( <> <div className="flex flex-row"> {temperatureData.map((item, i) => ( <div className="flex flex-auto rounded justify-center items-center te ...

Trouble accessing data property within a method in Vue 3 with Typescript

I am facing an issue with accessing my data in a method I have written. I am getting a Typescript error TS2339 which states that the property does not exist in the type. TS2339: Property 'players' does not exist on type '{ onAddPlayers(): vo ...

What is the appropriate overload to be selected when utilizing a ref in the method call?

Encountering an unfamiliar TS error while working with the code snippet below: <script lang="ts"> import {defineComponent, computed, toRef} from 'vue' import _ from 'lodash' import {DateTime} from 'luxon' int ...