web-dev-qa-db-fra.com

Angular2 Quick Start - Message 'Impossible d'obtenir'

J'ai essayé de faire le guide de démarrage rapide pour Angular2. J'ai fait l'exemple comme indiqué dans le guide rapide. Cependant, lorsque je l'ai exécuté, le message suivant "Impossible à obtenir" s'affichait. Est-ce que quelqu'un sait pourquoi cela se passe?

Fichier boot.js 

// JavaScript source code
(function (app) {
    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.AppComponent);
    });
})(window.app || (window.app = {}));

Le fichier app.component.js 

(function (app) {
    app.AppComponent = ng.core.Component({
        Selector: 'my-app',
        template: '<h1>My First Angular 2 App </h1>'
    })
    .class({
        constructor: function () { }
    });
})(window.app || window.app == {});

Le fichier d'index 

<html>

<head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/boot.js'></script>

</head>

<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>

</html>

Enfin, le fichier package.json 

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}

J'ai couru la ligne 'npm start' qui a ouvert le navigateur et qui a été affichée 'Impossible

javascriptnode.jsangular
29
Josiane Ferice

J'ai compris quel était le problème. J'avais un espace supplémentaire dans mon fichier html qui causait l'erreur. J'ai supprimé l'espace supplémentaire et cela a fonctionné comme prévu.

1
Josiane Ferice

J'ai eu cette erreur quand index.html n'était pas dans le bon dossier. 

Si tel est le cas, le placer dans le dossier racine du projet angulaire principal devrait résoudre le problème.

54
Melaz

Contexte

J'ai eu le même problème: Cannot GET / pagename sur chaque page. J'ai cherché sur Internet mais je n'ai pas trouvé de solution comme celle-ci.

Mon projet résidait dans un dossier avec ASCII - espaces car le nom du référentiel contenait également des espaces.

Réponse

Le dossier dans lequel réside votre projet ne doit contenir aucun espace ou ASCII Caractère "% 20".

 enter image description here

Après ce changement, mon projet n’a pas donné l’erreur Cannot GET / pagename.

6
Brampage

J'ai eu le même problème parce que j'ai oublié d'ajouter le fichier bs-config.json que nous pouvons voir dans la partie "Structure finale" du didacticiel. Il devrait contenir:

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}
2
SquirFly

J'ai eu le même problème avec l'exemple Angular.io "minimal NgModule" Ils nous ont donné les fichiers avec "0" supplémentaire dans les noms de fichiers . J'ai résolu le problème en convertissant uniquement le nom de fichier "index.0.html "to" index.html " Il a finalement fonctionné :)

0
Tarek.Mostafa

Vous devez exécuter la commande 'ng serve' où se trouve votre dossier 'src'.

0
Puneet Goel

Si vous utilisez des itinéraires, assurez-vous que le composant importé correctement pointe vers le "" (/ itinéraire).

exemple: { path: "", component: MyHomeComponent }

Exemple complet de app.module.ts dans une installation de Angular 5 (idem à partir de Angular +2 ...)

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { Routes, RouterModule } from "@angular/router";

import { AppComponent } from "./app.component";
import { CinemaService } from "./services/cinema.service";
import { MyHomeComponent } from "./components/my-home/my-home.component";
import { MyMovieComponent } from "./components/my-movie/my-movie.component";

const routes: Routes = [
  { path: "", component: MyHomeComponent },
  { path: "movie/:id", component: MyMovieComponent },

];

@NgModule({
  declarations: [
    AppComponent,
    MyHomeComponent,
    MyMovieComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  providers: [CinemaService],
  bootstrap: [AppComponent]
})
export class AppModule { }
0
Isak La Fleur

Impossible d'obtenir/une erreur survient lorsque la compilation de votre projet angulaire échoue. Donc, assurez-vous d’abord que vous n’avez aucune erreur dans votre code angulaire et que cela compile bien. Il suffit d'utiliser cette commande:

ng serve

et il devrait lister tous les problèmes de votre code angulaire.

0
Vijay Jaiswal

J'ai eu cette erreur juste parce que j'ai fait quelques changements dans le fichier angular-cli.json, puis j'ai lancé mon application et j'ai eu l'erreur en tant que 

 " Cannot GET / ".

Ensuite, j'ai supprimé les modifications apportées dans le fichier angular-cli.json et exécuté l'application. Cela fonctionnait bien. 

0
Cyril Edison