web-dev-qa-db-fra.com

"Connexion refusée" Angular 4 localhost

Je reçois la page "Connexion refusée" lors de l'exécution de l'application Angular 4 localement.

L'URL est http://localhost:4200/

Exécution de l'application avec ng serve --open commande.

MISE À JOUR 1: angular.json

Avec certaines sources, j'ai trouvé que le fichier angular cli est maintenant changé en angular.json.

ci-dessous sont les détails de agnular.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
  "angular-forms": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist",
          "index": "src/index.html",
          "main": "src/main.ts",
          "tsConfig": "src/tsconfig.app.json",
          "polyfills": "src/polyfills.ts",
          "assets": [
            "src/assets",
            "src/favicon.ico"
          ],
          "styles": [
            "src/styles.css"
          ],
          "scripts": []
        },
        "configurations": {
          "production": {
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true,
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "angular-forms:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "angular-forms:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "angular-forms:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "karmaConfig": "./karma.conf.js",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "scripts": [],
        "styles": [
          "src/styles.css"
        ],
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "src/tsconfig.app.json",
          "src/tsconfig.spec.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
},
"angular-forms-e2e": {
  "root": "",
  "sourceRoot": "",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "./protractor.conf.js",
        "devServerTarget": "angular-forms:serve"
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "e2e/tsconfig.e2e.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}
},
"defaultProject": "angular-forms",
"schematics": {
"@schematics/angular:component": {
  "prefix": "app",
  "styleext": "css"
},
"@schematics/angular:directive": {
  "prefix": "app"
}
}
}

Veuillez me faire savoir si plus de détails sont requis

Une capture d'écran est jointe pour plus de détails.

enter image description here

node.jsangularmean-stack
4
Gopal

J'ai trouvé une solution à cela et c'est assez simple. Comme @Devid interroge mi sur le proxy d'entreprise, j'ai commencé à chercher une solution dans ce sens. Enfin, j'ai constaté qu'il y avait une erreur mineure dans mes paramètres de proxy LAN.

Lors de la configuration du serveur proxy, j'oublie d'activer l'option "Contourner le serveur proxy pour les adresses locales" et qui provoque une erreur mi ci-dessus.

Ci-dessous, la capture d'écran pour plus de détails.

enter image description here

0
Gopal

Accédez à la ligne de commande et exécutez ng serve --port 4200.

J'espère que cela t'aides.

2
Pro Denis

Au lieu de localhost essayez d'accéder à votre application en utilisant votre IP comme ceci,

(En supposant que vous utilisez Windows) Dans votre ligne de commande, tapez => ipconfig et copiez l'adresse IP qu'il renvoie,

Par exemple, si l'adresse IP est 192.168.0.10, vous pouvez accéder à votre application (après avoir émis ng server) comme,

http://192.168.0.10:4200

J'espère que cela t'aides!

1
David R