Angular2 beta - 引导HTTP_PROVIDERS - “意外令牌”

问题描述：

从5 minute quick start开始，我一直在玩angular2测试版，并且遇到了让我难倒的问题。Angular2 beta - 引导HTTP_PROVIDERS - “意外令牌”

这是一个虚弱的版本，显示我有问题。首先，这里是一个完美的世界应用程序。

的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>

应用程序/ boot.ts

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

bootstrap(AppComponent);

应用程序/ 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 { 
}

我evntually想打电话给我的Web API服务，所以我试图按照the docs for Http，我更新boot.ts如下：

新的应用程序/ 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]);

这里的地方的东西噎住了。

铬给我：

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

，如果我尝试设置HTTP_PROVIDERS作为我的组件上的viewProvider它也失败。

有没有其他人有任何运气让Http正确注入angular2测试版？

的Visual Studio 2015年
Node.js的& Node.js的工具，适用于Visual Studio
使用 '故宫开始' 来编译和运行

这是http://stackoverflow.com/questions/34387174的DUP？ –

@GünterZöchbauer种。在这种情况下，他缺少http bundle，例如'' –

类似的错误，但是原因不同。当我启动HTTP_PROVIDERS时，我有一个工作应用程序会中断。他的问题的解决方案是修复index.html中的System.Config调用，这对我来说不是问题，因为一切正常，直到我启动HTTP_PROVIDERS – Cosmosis

答

出现此错误，当您尝试导入的东西这在使用SystemJS时并未包含在您的HTML中。像Webpack这样的模块捆绑器可以处理所有这些。

对于你的情况，你必须添加HTTP包，这是一个分离的捆绑，例如

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

尝试使用路由器时，你会看到同样的错误，你忘了加上路由器捆绑。

检查从@ pkozlowski，开源的回购

Using SystemJS这两种配置的区别是：对于这种情况，他会一直增加HTTP包，或者路由器捆绑，如果他想使用它们。
Using Webpack：在这种情况下，Webpack将为您包装该bundle.js文件中的所有内容。

很高兴帮助。

我发现JSPM对捆绑angular2模块也很有效。 – brando

@brando除非您想将其作为单独的独立包使用，否则JSPM已经提供了angular2'jspm install angular2'。 –

感叹，这个错误信息应该比这个更好。 – allenhwkim

答

如果您使用NPM，包括与HTTP引用到本地安装的脚本标签：

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

这应该是3/2016接受的答案。如果其他人有这个问题，这是修复。 –

Angular2 beta - 引导HTTP_PROVIDERS - “意外令牌”

相关推荐