instalar - npm update typescript compiler
Angular2 beta-bootstrapping HTTP_PROVIDERS-"Token inesperado<" (2)
Comenzando con el inicio rápido de 5 minutos , he estado jugando con la beta angular2 y me he topado con un problema que me ha dejado perplejo.
Aquí hay una versión simplificada que muestra el problema que tengo. Primero aquí una aplicación hola mundial 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"
}
}
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 {
}
Anteriormente, quiero llamar a mi servicio Web Api, así que estoy tratando de seguir los documentos para Http , actualizo boot.ts de la siguiente manera:
nueva aplicación / 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]);
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 HTTP_PROVIDERS como viewProvider en mi componente.
¿Alguien más ha tenido suerte para que Http se inyecte correctamente en la beta angular2?
- Visual Studio 2015
- Node.JS & Node.JS herramientas para visual studio
- Usando ''NPM start'' para compilar y ejecutar
Este error se produce cuando intentas importar algo que no está incluido en tu HTML cuando utilizas SystemJS. Los integradores 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 enrutador y olvidó agregar el paquete del enrutador.
Compruebe la diferencia entre estas dos configuraciones de los repos de @ pkozlowski-opensource
- Usando SystemJS : para este caso, tendría que agregar el paquete http, o paquete de enrutadores si quisiera usarlos.
- Usando Webpack : en este caso, Webpack empaqueta todo en ese archivo
bundle.jspor usted.
Me alegro de que haya ayudado.
Si usa 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>