Angular2 beta-PROVEEDORES DE HTTP bootstrapping - " Token inesperado <"

Comenzando con el inicio rápido de 5 minutos He estado jugando alrededor de la beta angular2 y me he encontrado con un problema que me tiene perplejo.

Aquí hay una versión simplificada que muestra el problema que tengo. Primero aquí una aplicación hello world que funciona perfectamente.

Paquete.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"
    }
}

Índice.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.componente.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 {
}

Incluso quiero llame a mi servicio Web Api, así que estoy tratando de seguir los documentos para Http, actualizo el arranque.ts como sigue:

Nueva aplicación / arranque.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]);

Y aquí es donde las cosas se ahogan.

Chrome me da: 

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

También falla si intento establecer el HTTP_PROVIDER como un viewProvider en mi componente.

¿Alguien más ha tenido suerte consiguiendo que Http se inyecte correctamente en la beta de angular2?

  • Visual Studio 2015
  • Nodo.JS & Node.Herramientas JS para visual studio
  • Usando 'NPM start' para compilar y ejecutar
Author: luke, 2015-12-21
Source

2 answers

Este error ocurre cuando intenta importar algo que no está siendo incluido en su HTML cuando usa SystemJS. Los paquetes de módulos como Webpack manejan todo eso por ti.

Para su caso, debe agregar el paquete Http que es un paquete separado, por ejemplo

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

Verá este mismo error al intentar usar el router y olvidó agregar el paquete del router.

Compruebe la diferencia entre estas dos configuraciones de @pkozlowski-opensource repos

  • Usando SystemJS: Para este caso tendría que agregar http bundle, o router bundle si quisiera usarlos.
  • Usando Webpack: En este caso Webpack empaqueta todo en ese archivo bundle.js para usted.

Me alegra que haya ayudado.

 52
Author: Eric Martinez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-08 10:45:38

Si está utilizando npm, incluya una etiqueta de script con la referencia http a su instalación local: 

<script src="node_modules/angular2/bundles/http.dev.js"></script>
 11
Author: E. Fortes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-02 22:59:59