Troubleshooting localhost issue with a Chrome extension in Visual Studio Code

When working in VS Code, I encountered an issue with launching my HTML AngularJS project on localhost. Every time I try to launch the project, I receive an error message stating "Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:8080/)".

Here is the structure of my project:-

Project => .vscode => launch.json
        => app
        => scripts
        => styles
        => index.html

This is the content of my launch.json file:-

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

If anyone has any suggestions or solutions to this problem, I would greatly appreciate your help. Thank you in advance.

angularjstypescriptgoogle-chromevisual-studio-code

Answer №1

I encountered a similar issue.

To resolve it, I made changes to my launch.json file as shown below (I have Chrome set as my default browser):

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\app.js"
        }
    ]
}

The 'app.js' file was located in the root folder of my workspace.

Here is how my previous launch.json file looked like:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Answer №2

Make changes to the launch.json file located in the .vs code directory by removing the last three lines related to the configuration settings (specifically, name, url, webroot).

Original content of launch.json file

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "sample1",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
]

}

Updated launch.json file after making changes

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

    {
        "type": "pwa-chrome",
        "request": "launch",
    }
]

}

If the above solution does not solve the issue, consider deleting the launch.json file from the .vs code folder. Both methods proved effective for me.

Answer №3

Simply update your settings by placing everything in your launch.json file.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 4200,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Answer №4

Have you considered omitting the URL line? It's provided below:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
       // "url": "http://localhost:8080", should this line be removed?
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
] }

I have also taken the following steps:

  1. Downloaded and installed Node JS on my computer (Link -- https://nodejs.org/)
  2. In Visual Studio, pressed (Ctrl + Shift + X) and searched for 'Live Server'
  3. Installed 'Live Server' by Ritwick Dey, then closed and reopened Visual Studio

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

Infinite loop caused by Angular JS routing止

I have set up a Django server with the following configuration: urls.py urlpatterns = [ url('^', IndexView.as_view(), name='index') ] landing/urls.py urlpatterns = [ url(r'^admin/', admin.site.urls), url('^.*&a ...

javascriptpythonangularjsdjango

The data type 'Observable<any>' cannot be assigned to the type 'StoresSummaryResults'. The property 'Data' is not present in the 'Observable<any>' type

As a newcomer to using the Observable with Angular 2, I am facing an issue where my structure is not receiving the results despite being able to validate the response from my REST API. Below is the data class in Typescript that I have: import { RESTResul ...

angularjstypescriptobservable

How can I set up Prettier to exclude a line following a specific pattern?

Is there a method to configure Prettier in Visual Studio Code to exclude lines following a specific pattern? Sometimes, I require a directive like /**@ts-ignore */ followed by a lengthy line. However, when Prettier formats the code, it introduces new line ...

typescriptvisual-studio-codeprettier

Can functions be stored and invoked within a dictionary in TypeScript?

Currently, I'm in the process of refactoring some code and had a question regarding the possibility of declaring and initializing a dictionary that contains factory functions, with each function being associated with an enumerator key. This setup woul ...

functiondictionarytypescriptfactoryenumeration

Leveraging Global Variables and Functions with Webpack and TypeScript

I have been utilizing Webpack in conjunction with TypeScript, HTML, and SCSS to develop a project. My goal is to create a single page application that incorporates a router located within the root folder of the project /framework/, with all my source code ...

typescriptwebpackimportglobal-variables

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

My application keeps encountering this persistent error: extensions::uncaught_exception_handler:8 Error in event handler for runtime.onMessage: Attempt to use a destroyed view: detectChanges at ViewDestroyedException.BaseException [as constructor] (chrome ...

javascripttypescriptangular

clicking a table row will activate the *ngFor directive

Incorporating data from an API into a table, I have enabled the functionality for users to click on table rows in order to change the displayed data using background code: <tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)=" ...

htmlangulartypescript

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

Is there a way to prevent closing when there are pending changes without success? this.dialogRef.beforeClosed().subscribe(() => { this.dialogRef.close(false); //some code logic //... }); The setting disableClose on MatDialog must remain as false ...

javascriptangulartypescriptangular-materialdialog

Accessing a factory in a controller from a different module using AngularJS

Here we have the factory code located within the myApp module that handles user authentication: angular.module('myApp') .factory('userFactory', ['$http', function ($http) { var userFactory = {}; ...

angularjsangularjs-controllerangularjs-factoryangularjs-injector

Using react-hook-form to easily update form data

While working on my project with react-hook-form for updating and creating details, I encountered a problem specifically in the update form. The values were not updating properly as expected. The issue seems to be within the file countryupdate.tsx. import ...

javascriptreactjstypescriptreact-hook-form

Dependency Injection: The constructor of the injectable class is called multiple times

There are multiple classes that inject the TermsExchangeService: import {TermsExchangeService} from './terms-exchange.service'; @injectable() export class TermsExchangeComponent { constructor( private termsExchangeService: TermsExchan ...

typescriptinversifyjs

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...

javascripthtmlangularjs

Avoiding uib-popover from getting clipped by uib-carousel

I have a small widget with a popover that works fine when placed inside a div, but gets clipped when inserted into a carousel. Here's an example to illustrate what I mean: (The top image shows the widget in a div without clipping) https://i.sstatic. ...

cssangularjsangular-ui-bootstrap

Tips for sending a function with arguments in a React application using TypeScript

Is there a way to streamline passing a handleClick function to the son component so that it does not need to be repeated? The code in question is as follows: Mother Component: const Mother = () => { const [selectedOption, setSelectedOption] = useSt ...

javascriptreactjstypescriptnext.js

Generating a two-dimensional array and setting its values in JavaScript

I need assistance with creating and initializing a two-dimensional array in JavaScript within an AngularJS application. My current approach is as follows: $scope.invalidVote = []; for (var i = 0; i < $scope.arry1.length; i += 1) { $scope.answersCou ...

javascriptarraysangularjs

NodeJS function does not pause for the PostgreSQL database call despite using await keyword

I am attempting to recursively insert entries into the database where each entry depends on the previous one (the ID of the previous entry will be the child_id of the next entry). However, I am facing difficulties in getting async/await to work correctly. ...

javascriptnode.jspostgresqltypescriptexpress

How can we ensure that an enum is accessible throughout the entire meanjs stack?

Currently, I am exploring the meanjs technology stack and facing a challenge in creating a centralized enum array that can be accessed throughout the project, from MongoDB to Angular. Can anyone suggest a smart solution for accomplishing this task? ...

javascriptnode.jsangularjsmeanjs

"Confusion arising from the $get method in an Angular

My understanding of providers is a bit unclear. Could someone clarify for me why I am unable to access the "setText" provider function from the controller? It seems that I can only access functions within the $get block. var myMod = angular.module(' ...

angularjsprovider

One-page app ensuring top-notch security for template management

In the setup of my application, I utilize a single-page WEB-UI built with AngularJS and server rest services. The server is implemented using Spring Boot with Java annotation configuration, and security features are enabled. I am able to control access to ...

javaangularjsspringspring-securitysingle-page-application

Struggling to make the paste event function in Typescript

Here is a snippet of my Typescript code: const pasteFn = (e: ClipboardEvent) => { const { clipboardData } = e; const text = clipboardData?.getData('text/plain'); console.log(text); }; window.addEventListener('paste', pas ...

typescript