Angular2β - 自举HTTP_PROVIDERS - ＆QUOT;意外令牌LT;＆QUOT; [英] Angular2 beta - bootstrapping HTTP_PROVIDERS - "Unexpected Token <"
问题描述
与5分钟快速启动我一直在玩周围的angular2测试，并已开始运行横跨已经难倒了我一个问题。
Starting with the 5 minute quick start I've been playing around the angular2 beta and have run across a problem that has me stumped.
下面是一个简单化的版本，显示我有问题。首先在这里一个Hello World的应用程序完美的工作。
Here is a dumbed down version that shows the problem I have. First here a hello world app working perfectly.
的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服务，所以我试图按照的文档对于HTTP ，我更新boot.ts如下：
I evntually want to call my Web Api service so I am trying to follow the docs for Http, I update boot.ts as follows:
新的应用程序/ 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]);
和这里是那里的东西噎住了。
And here's where things choke.
镀铬给我：
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失败。
It also fails if I try to set the HTTP_PROVIDERS as a viewProvider on my component.
有没有其他人有过任何运气得到的Http在angular2测试正常注入？
Has anyone else had any luck getting Http to inject properly in the angular2 beta?
- 的Visual Studio 2015年
- 的Node.js和放大器;为Visual Studio工具的Node.js
- 使用故宫开始来编译和运行
推荐答案
当您尝试导入使用SystemJS时不被包含在HTML的东西会出现此错误。模块捆扎机像WebPACK中处理所有适合你。
This error occurs when you try to import something that is not being included in your HTML when using SystemJS. Module bundlers like Webpack handle all that for you.
有关你的情况，你必须添加HTTP包，这是一个分离捆绑，例如：
For your case you have to add the Http bundle that's a separated bundle, for example
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
您将看到试图使用路由器时，这个同样的错误，你忘了添加路由器捆绑。
You'll see this same error when trying to use the router and you forgot to add the router bundle.
从@ pkozlowski-开源的回购检查这两种配置的区别
Check the difference between these two configurations from @pkozlowski-opensource's repos
- 使用SystemJS 的：对于这种情况，他会一直增加HTTP捆绑或路由器捆绑，如果他想使用它们。
- 使用WebPACK中：在这种情况下WebPACK中的捆绑一切
bundle.js为你的文件。
- Using SystemJS : For this case he would've to add http bundle, or router bundle if he wanted to use them.
- Using Webpack : In this case Webpack bundles everything in that
bundle.jsfile for you.
很高兴它帮助。
这篇关于Angular2β - 自举HTTP_PROVIDERS - ＆QUOT;意外令牌LT;＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
