Npm Angular2测试版-引导HTTP_提供程序-“；意外标记<&引用；

首先，我一直在玩angular2测试版，遇到了一个让我难堪的问题

这是一个简单的版本，显示了我的问题。首先，这里有一个hello world应用程序可以完美地工作

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

app/app.component.ts

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

bootstrap(AppComponent);

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

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]);

我通常想调用我的Web Api服务，因此我尝试按照如下方式更新boot.ts：

新应用程序/boot.ts

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

bootstrap(AppComponent);

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

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]);

这就是事情发生的地方

Chrome给了我：

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

uncaught语法错误：意外令牌<-http:1
未捕获的语法错误：意外标记<-angular2 polyfills.js:138
评价http://localhost:3000/angular2/http
加载错误http://localhost:3000/app/boot.js

如果尝试将HTTP_提供程序设置为组件上的viewProvider，也会失败

其他人是否有幸在angular2测试版中正确注入Http

• Visual Studio 2015
• 适用于visual studio的Node.JS和Node.JS工具
• 使用“NPM start”编译和运行

---

当您在使用SystemJS时尝试导入HTML中未包含的内容时，会发生此错误。像Webpack这样的模块绑定器可以为您处理所有这些

对于您的情况，您必须添加Http捆绑包，例如，它是一个单独的捆绑包

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

在尝试使用路由器时，您会看到相同的错误，并且您忘记添加路由器包

从@pkozlowski opensource的repos中检查这两种配置之间的差异

• ：在这种情况下，如果他想使用http包或路由器包，他必须添加它们
• ：在本例中，Webpack为您绑定了

  bundle.js

  文件中的所有内容

---

很高兴它有所帮助。

如果您正在使用npm，请包含一个脚本标记，其中包含对本地安装的http引用：

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

这是一个重复吗？@GünterZöchbauer有点像。在这种情况下，他丢失了http包，例如类似的错误，但原因不同。我有一个正在工作的应用程序，当我引导HTTP_提供程序时，它会崩溃。他的问题的解决方案是修复index.html中的System.Config调用，这在我的例子中不是问题，因为在我引导HTTP之前，一切都可以完美地工作_PROVIDERS@EricMartinez你是我的英雄。昨天我看了很久，知道这是件愚蠢的事。如果你提交答复，我将接受。我想我是希望angular能帮我解决这个问题？如果import{HTTP_PROVIDERS}语句不自动包含JS，那么它的意义何在？lol:）@Cosmosis为了回答您的问题，Angular2使用未来的es6模块导入格式。最终，浏览器将支持本地的

import

语法。在那之前，像system.js这样的polyfill是必要的。我发现JSPM在捆绑angular2模块方面也很好。@brando除非你想把它作为一个独立的捆绑包使用，否则JSPM已经提供了angular2

JSPM安装angular2

。唉，此错误消息应优于此消息。这应是截至2016年3月的公认答案。如果其他人有此问题，这就是解决方法。