web-dev-qa-db-fra.com

Angular2 beta - bootstrapping HTTP_PROVIDERS - "Token inattendu <"

En commençant par le démarrage rapide de 5 minutes J'ai joué autour de la bêta angular2 et j'ai rencontré un problème qui m'a dérouté.

Voici une version simplifiée qui montre le problème que j'ai. Tout d'abord, voici une application Hello World qui fonctionne parfaitement.

package.json 

{
   "name": "...",
   "version": "0.0.1",
   "description": "...",
   "author": {
   "name": "...",
   "email": "..."
    },
    "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "ISC",
    "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "^0.5.10"
    },
    "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "TypeScript": "^1.7.3"
    }
}

index.html 

<head>
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet" />

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js">    </script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>


<!-- 2. Configure SystemJS -->
<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/boot')
          .then(null, console.error.bind(console));
</script>

</head>

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

app/boot.ts 

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'

bootstrap(AppComponent);

app/app.component.ts 

import {Component, View} from 'angular2/core';
import {RegisterFormComponent} from './accounts/register-form.component'
@Component({
    selector: 'my-app',
})
@View({
    template: 'hello world',
})
export class AppComponent {
}

Je veux toujours appeler mon service Web Api, donc j'essaie de suivre les documents pour Http , je mets à jour boot.ts comme suit:

nouvelle application/boot.ts 

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent, [HTTP_PROVIDERS]);

Et c'est là que les choses s'étouffent.

Chrome me donne:

uncaught SyntaxError: Unexpected token < - http:1
uncaught SyntaxError: Unexpected token < - angular2-polyfills.js:138
    evaluating http://localhost:3000/angular2/http
    error loading http://localhost:3000/app/boot.js

Il échoue également si j'essaie de définir HTTP_PROVIDERS en tant que viewProvider sur mon composant.

Quelqu'un d'autre a-t-il eu de la chance pour que Http s'injecte correctement dans la bêta angular2?

  • Visual Studio 2015
  • Outils Node.JS et Node.JS pour Visual Studio
  • Utilisation de "NPM start" pour compiler et exécuter
npmtypescriptangularbeta
24
Cosmosis

Cette erreur se produit lorsque vous essayez d'importer quelque chose qui n'est pas inclus dans votre code HTML lors de l'utilisation de SystemJS. Les bundlers de modules comme Webpack gèrent tout cela pour vous.

Pour votre cas, vous devez ajouter le bundle Http qui est un bundle séparé, par exemple

<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>

Vous verrez cette même erreur lorsque vous essayez d'utiliser le routeur et vous avez oublié d'ajouter l'ensemble de routeurs.

Vérifiez la différence entre ces deux configurations par rapport au repos de @ pkozlowski-opensource

  • en utilisant SystemJS : Dans ce cas, il faudrait ajouter un bundle http ou un bundle de routeurs s'il voulait les utiliser.
  • tilisation de Webpack : Dans ce cas, Webpack regroupe tout dans ce bundle.js fichier pour vous.

Heureux que cela ait aidé.

52
Eric Martinez

Si vous utilisez npm, incluez une balise de script avec la référence http à votre installation locale:

<script src="node_modules/angular2/bundles/http.dev.js"></script>
11
E. Fortes