angular2：未捕获的SyntaxError：意外的令牌LT; [英] angular2: Uncaught SyntaxError: Unexpected token <
问题描述
我不断收到此错误未捕获的SyntaxError：意外的令牌LT; 每当我尝试运行我的angular2应用程序。这仅仅是基于对路由教程的angular2的修改网站。
通常，这些错误类型为自己在那里我miswrote一张code发言。但Chrome的控制台告诉我，错误一个angular2 js文件的内部发生。
阅读并试图从两个<一个答案href=\"https://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal\"><$c$c>Chrome未捕获的语法错误：意外的令牌非法 和<一个href=\"http://stackoverflow.com/questions/10501634/warning-c4819-how-to-find-the-character-that-has-to-be-saved-in-uni$c$c\"><$c$c>warning C4819：如何找到已被保存在UNI code字符 没有工作。猜测的错误有可能成为我的boot.ts或app.component.ts的地方。
boot.ts
从'angular2 /平台/浏览器的进口{}引导;
从angular2 /路由器的进口{ROUTER_PROVIDERS};
进口{} AppComponent从'./app.component';
进口{} HallService从'./hall/hall.service';
引导（AppComponent，[
ROUTER_PROVIDERS，
HallService
]）;
app.component.ts
进口{}组件从angular2 /核心;
进口{RouteConfig，ROUTER_DIRECTIVES}从'angular2 /路由器;
进口{} HallCenterComponent从'./hall/hall-center.component';@零件（{
选择：我的应用，
模板：`
＆LT; H1类=标题＆GT;组件和路由器LT; / H1＆GT;
＆下;一个[routerLink] =['HallCenter']＆GT;哈伦＆下; / A＆GT;
＆LT; A＆GT;英雄＆LT; / A＆GT;
＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
`
指令：[ROUTER_DIRECTIVES]
}）
@RouteConfig（[
{
路径：'/霍尔/ ......，
名称：'HallCenter'，
成分：HallCenterComponent，
useAsDefault：真
}
]）
出口类AppComponent {}
的index.html
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;基本href =/＆GT;
＆LT;标题＆GT;工厂项目与LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =styles.css的＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / systemjs /距离/ system.src.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / rxjs /包/ Rx.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ router.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
System.config（{
包：{
应用：{
格式为：注册，
defaultExtension：'JS'
}
}
}）;
System.import（应用程序/启动）
。然后（NULL，console.error.bind（控制台））;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;我的应用＆GT;加载...＆LT; /我的应用＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
霍尔center.component.ts
进口{}组件从angular2 /核心;
进口{RouteConfig，RouterOutlet}从'angular2 /路由器;
进口{} HallListComponent从'./hall-list.component';
进口{} HallDetailComponent从'./hall-detail.component';
进口{} HallService从'./hall.service';@零件（{
模板：`
＆LT; H2＆GT;展馆中心＆lt; / H2＆GT;
＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
`
指令：[RouterOutlet]
供应商：[HallService]
}）
@RouteConfig（[
{路径：'/'，名称：'HallCenter'，成分：HallListComponent，useAsDefault：真正}，
{路径：'/：身份证'，名称：'HallDetail'，成分：HallDetailComponent}，
{路径：'/名单/：身份证'，名称：'HallList'，成分：HallListComponent}
]）
出口类HallCenterComponent {}
您有几个问题：
您组件选择是：我的应用
＆LT;应用＆GT;载入中...＆LT;应用＆GT;
应
＆LT;我的应用＆GT;加载...＆LT; /我的应用＆GT;
此外，要导入错误的文件：
System.import（应用程序/应用程序'）;
应
System.import（应用程序/启动'）;
此外，除非你是编译打字稿以Java脚本..你应该改变这条线和进口typescript.js
{defaultExtension：'JS'}}
应
{defaultExtension：'TS'}}
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/typescript.js＆GT;＆LT; / SCRIPT＆GT;
另外，你缺少一些进口：
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2-polyfills.js＆GT;＆LT; /脚本＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/system.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/Rx.js＆GT;＆LT; / SCRIPT＆GT;
下面是你的code的 plunker 工作
I keep getting this error Uncaught SyntaxError: Unexpected token < whenever I try to run my angular2 application. This is just a modification based on the routing 'tutorial' of the angular2 website.
Normally these kind of errors speak for themselves where I miswrote a piece of code. But the Chrome console tells me the error occurs inside of an angular2 js file.
Reading and trying the answers from both Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL and warning C4819: How to find the character that has to be saved in unicode? didn't work. Guessing that the error has to be somewhere in my boot.ts or app.component.ts.
boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
import {HallService} from './hall/hall.service';
bootstrap(AppComponent,[
ROUTER_PROVIDERS,
HallService
]);
app.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HallCenterComponent} from './hall/hall-center.component';
@Component({
selector: 'my-app',
template: `
<h1 class="title">Component Router</h1>
<a [routerLink]="['HallCenter']">Hallen</a>
<a>Heroes</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{
path: '/hall/...',
name: 'HallCenter',
component: HallCenterComponent,
useAsDefault: true
}
])
export class AppComponent { }
index.html
<html>
<head>
<base href="/">
<title>Factory project</title>
<link rel="stylesheet" href="styles.css">
<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>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
hall-center.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, RouterOutlet} from 'angular2/router';
import {HallListComponent} from './hall-list.component';
import {HallDetailComponent} from './hall-detail.component';
import {HallService} from './hall.service';
@Component({
template: `
<h2>HALL CENTER</h2>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet],
providers: [HallService]
})
@RouteConfig([
{path:'/', name: 'HallCenter', component: HallListComponent, useAsDefault: true},
{path:'/:id', name: 'HallDetail', component: HallDetailComponent},
{path:'/list/:id', name: 'HallList', component: HallListComponent}
])
export class HallCenterComponent { }
You have several issues:
you component selector is : 'my-app'
<app>Loading...<app>
should be
<my-app>Loading...</my-app>
Also, you are importing a wrong file:
System.import('app/app');
should be
System.import('app/boot');
Also, unless you are compiling your typescript to java script.. you should change this line and import typescript.js
{defaultExtension: 'js'}}
should be
{defaultExtension: 'ts'}}
<script src="https://code.angularjs.org/tools/typescript.js"></script>
Also, you are missing few imports:
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
Here is a plunker of your code working
这篇关于angular2：未捕获的SyntaxError：意外的令牌LT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
