web-dev-qa-db-fra.com

Angular: Impossible d'obtenir /

J'essaie d'ouvrir, de créer et de gérer le projet Angular 4 de quelqu'un d'autre, mais je ne parviens pas à visualiser le projet lorsque je l'exécute à ma façon. Je ne vois pas ce qui ne va pas ou ce que je devrais faire maintenant. J'avais déjà tout en place pour utiliser NPM et NodeJS

Les étapes que j'ai prises étaient les suivantes:

  • Ouvrir le projet
  • npm installer
  • ng servir

Le projet compile le bon chemin. (J'ai ma propre application angulaire et je sais à quoi ça ressemble) La console montre: 

'** NG Live Development Server écoute sur localhost: 4200, ouvrez votre navigateur sur http: // localhost: 4200 **'.

Ensuite, lorsque j'ai ouvert un navigateur Web, j'ai accédé à localhost: 4200 et une page Web contenant le texte suivant ont été affichées: 

'Ne peut pas obtenir /'

Et sur la console était le texte suivant:

'GET http: // localhost: 4200/ 404 (introuvable)'

Le projet devrait fonctionner correctement, mais je ne parviens pas à accéder à une URL fonctionnelle sur la page Web. Le routage est mis en place d'une autre manière que j'ai l'habitude de faire. Dans app.module.ts, les éléments suivants sont implémentés:

app.module.ts

const appRoutes: Routes = [
{ path: '',   redirectTo: 'tree', pathMatch: 'full' },
{ path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard],
children: [{path:'', component: PanelComponent},{path: 'add', component: 
AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent}, 
{path:'manage-users', component: ManageUsersComponent}, {path:'view-trees', 
component: ViewTreeComponent}]},
{path:'tree', component: TreeComponent},
{path:'error', component: ErrorComponent},
{path:'unauthorized', component: UnauthorizedComponent},
{path:'login', component: LoginComponent},
{path:'entire-tree', component: EntireTreeComponent},
{ path: '**', component: PageNotFoundComponent },
];

Également ouvrir une page Web comme; localhost: 4200/tree ne fonctionne pas. Lorsque je laisse Angular arrêter de servir la page Web, la page Web affiche: "Ce site ne peut pas être atteint". Je pense donc que quelque chose est en cours d'exécution sur localhost: 4200 ... Un autre projet de cette personne se comporte de la même manière. .

 enter image description here

Est-ce que quelqu'un sait ce qui se passe? 

MODIFIER

app.module.ts

RouterModule.forRoot(appRoutes, { useHash: true })

Package.json

{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular-oauth2-oidc": "^1.0.20",
"angular-polyfills": "^1.0.1",
"angular2-jwt": "^0.2.3",
"angular2-spinner": "^1.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.8.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.4",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"TypeScript": "~2.3.3"
 }
}

Je vois aussi une icône à côté du nom de l'onglet avec le libellé: "Erreur".

OBSERVATION:

Nouvelle observation:

Après avoir exécuté npm install -g angular-cli, je n'ai pas pu exécuter ng serve. (Vous devez être dans un projet angular-cli pour pouvoir utiliser la commande de construction après la réinstallation de angular-cli)

Ensuite, j'ai exécuté npm install -g @angular/cli@latest et j'ai pu utiliser ng serve à nouveau. 

OBSERVATION 2:

Après avoir créé l'application avec: 'ng build ...', il n'y a pas d'index.html dans le dossier 'dist' ... Lorsque je mets le site Web en ligne, il n'y a qu'une structure de dossiers au lieu d'un site Web de Nice. Je pense que c'est parce qu'il n'y a pas d'index.html.

javascriptnode.jsangulartypescript
13
Klyner

Le problème était que j'ai exécuté les commandes dans le dossier /project/src/app. Revenir dans le dossier du projet afin de /project et exécuter ng serve à partir de là a résolu mon problème.

7
Klyner

Pour moi, c'était aussi un problème de chemin, mais j'avais un signe de pourcentage dans le dossier racine.

Après que je ai remplacé% 20 par un espace , cela a commencé à fonctionner :)

10
yezior

J'ai eu la même erreur causée par des erreurs de construction. J'ai couru construire dans le répertoire de mon application ce qui m'a aidé à corriger mes erreurs

6
J.Kirk.

J'ai eu le même problème lorsque je lance mon application angulaire avec Visual Studio. Obtenir l'erreur "Impossible d'obtenir /" dans le navigateur. rien de plus spécifique. Ensuite, exécutez la commande "ng build" via la ligne de commande. Ensuite, il a montré la véritable erreur.

 enter image description here

3
DineshNS

J'utilisais export class TestCalendar implements OnInit{} mais je n'ai pas écrit la fonction

 ngOnInit() {
    /* Display initial */
  }

. Après avoir exécuté la commande ng serve, j'ai découvert que je n'utilisais pas ngOnInit(){}. Une fois que j'ai implémenté, cela a bien fonctionné. J'espère que ça aide quelqu'un.

2
MuhammadMohsan

J'ai eu le même problème avec une application Angular 6+ et ASP.NET Core 2.0

Je venais juste d'essayer de modifier l'application angulaire de CSS à SCSS.

Ma solution a été d'aller dans le dossier src/angularApp et d'exécuter ng serve. Cela m'a aidé à réaliser que j'avais oublié de changer le fichier src/styles.css en src/styles.scss

2
MaylorTaylor

Vérifier si dans index.html la base est définie

<head>
  <base href="/">
  ...
</head>
1
Salih Şenol Çakarcı

Je faisais référence à l'un de mes fournisseurs avec deux boîtiers différents. L'un d'entre eux avait tort, mais seul le compilateur Webpack se plaignait. Je devais entrer dans le dossier ClientApp et utiliser ng build ou ng serve pour voir les erreurs. (ASP.NET Core SPA avec Angular 5)

1
Perrier