Edw*_*ard 7 javascript syntax-error token typescript angular
Uncaught SyntaxError: Unexpected token <每当我尝试运行angular2应用程序时,我都会收到此错误.这只是基于angular2网站的路由"教程"的修改.
通常这些错误说明了我错误编写了一段代码.但是Chrome控制台告诉我在angular2 js文件中发生了错误.
阅读并试图从两者的答案Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL ,并warning C4819: How to find the character that has to be saved in unicode?没有工作.猜测错误必须在我的boot.ts或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>
霍尔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 { }
小智 22
所以上面的答案似乎是正确的,但这里是有关该错误本身(只是为别人谁遇到同样的问题,不知道他们做了什么错误)的一些信息,因为它可以从字面上似乎每个单独的进口,是相当难以追查.
每当需要文件并且Web服务器配置为仅提供/而不是a 时,它就会出现404-file-not-found-page.
/通常然后转换为/index.html第一个字符通常是<(通常是开头<!DOCTYPE html>)并且由于这不是有效的javascript,浏览器会抛出非法令牌异常.
你有几个问题:
你的组件选择器是:'my-app'
<app>Loading...<app>
应该
<my-app>Loading...</my-app>
此外,您导入错误的文件:
System.import('app/app');
应该
System.import('app/boot');
此外,除非您要将您的打字稿编译为java脚本..您应该更改此行并导入typescript.js
{defaultExtension: 'js'}}
应该
{defaultExtension: 'ts'}}
<script src="https://code.angularjs.org/tools/typescript.js"></script>
此外,您缺少一些导入:
<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>
这里是一个plunker你的代码的工作