Javascript angular2: Uncaught SyntaxError: Unexpected token <
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34534920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular2: Uncaught SyntaxError: Unexpected token <
提问by Edward
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.
Uncaught SyntaxError: Unexpected token <每当我尝试运行我的 angular2 应用程序时，我都会收到此错误。这只是基于angular2 网站的路由“教程”的修改。
Normally these kind of errors speak for themselves where I miswrote a piece of code. But the Chrome console tells me the erroroccurs inside of an angular2 js file.
通常，在我写错了一段代码的地方，这些错误不言自明。但是 Chrome 控制台告诉我错误发生在 angular2 js 文件中。
Reading and trying the answers from both Chrome Uncaught Syntax Error: Unexpected Token ILLEGALand 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.
阅读并试图从两者的答案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
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
<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
大厅中心.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 { }
采纳答案by Abdulrahman Alsoghayer
You have several issues:
你有几个问题：
you component selector is : 'my-app'
你的组件选择器是：'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
另外，除非您将打字稿编译为 java 脚本。您应该更改这一行并导入 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 plunkerof your code working
这是你的代码工作的一个plunker
回答by Haringat
So the above answers seem to be correct but here is some information about the error itself (just for others who run into the same problem wondering what they did wrong) because it can appear with literally each singleimport and is quite difficult to track down.
所以上面的答案似乎是正确的，但这里有一些关于错误本身的信息（仅适用于遇到相同问题的其他人，想知道他们做错了什么），因为它可能会出现在每个导入中，并且很难追踪。
It appears whenever a file is required and the webserver is configured to just serve /instead of a 404-file-not-found-page.
每当需要文件并且网络服务器配置为仅提供服务/而不是404-file-not-found-page.
/usually then translates to /index.htmland there the first character usually is <(mostly the start of <!DOCTYPE html>) and since that is no valid javascript the browser throws an illegal token exception.
/通常然后转换为/index.html第一个字符通常是<（主要是 的开头<!DOCTYPE html>）并且由于它不是有效的javascript，浏览器会抛出非法令牌异常。
回答by Eggy
I suppose, you have installed angular 2 beta release. In this case you have to install additional modules:
我想，您已经安装了 angular 2 beta 版本。在这种情况下，您必须安装其他模块：
npm install es6-promise@^3.0.2 es6-shim@^0.33.3 [email protected] rxjs@^5.0.0-beta.0 [email protected] --save
And import these scripts:
并导入这些脚本：
<!-- ES6-related imports -->
<script src="../node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.min.js"></script>
<script src="../node_modules/angular2/bundles/http.min.js"></script>
<script src="../node_modules/angular2/bundles/router.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('app/app').catch(console.log.bind(console));
</script>
EDIT:
编辑：
In fact, these changes where introduced in alpha 49
事实上，这些变化是在alpha 49中引入的
回答by Michael Gikaru
In my case the error came from forgetting to include
在我的情况下，错误来自忘记包括
<script src="node_modules/angular2/bundles/router.min.js"></script>in index.html
在index.html 中
回答by imahama
In my case I had
就我而言，我有
import {Observable} from 'rxjs/rx';
which was giving error.
这是给错误。
I changed to
我改为
import {Observable} from 'rxjs/Rx';
and problem went away. So mind the case-sensitivity.
问题就解决了。所以请注意区分大小写。
回答by KhaledMohamedP
This is due to SystemJS trying to fetch rxjs methods from a relative path instead of the library itself
这是因为 SystemJS 试图从相对路径而不是库本身获取 rxjs 方法
I had to insert this line of code inside the Systemjs configuration System.config({})
我不得不在 Systemjs 配置中插入这行代码 System.config({})
paths: {
'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
}
Took me several hours to find this solution
我花了几个小时才找到这个解决方案
回答by snort
Ran into this in beta 3 using the rxjs v5.0.0-beta.0 package recommended in the Angular 2 quick start. I switched from the npm package to the one on the Angular beta CDN and it worked fine.
使用 Angular 2 快速入门中推荐的 rxjs v5.0.0-beta.0 包在 beta 3 中遇到了这个问题。我从 npm 包切换到 Angular beta CDN 上的包，它运行良好。
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
回答by dchacke
Ran into this today using Angular 2.0.0-beta.0 and rxjs. Had to change
今天使用 Angular 2.0.0-beta.0 和 rxjs 遇到了这个问题。不得不改变
import * as Rx from 'rxjs';
to
到
import * as Rx from 'rxjs/Rx';
回答by Sul Aga
make sure to add full path when you import. Also make sure to add ./ in front of files you import which are in the same directory.
导入时确保添加完整路径。还要确保在导入的文件前添加 ./ ，这些文件位于同一目录中。
So if file.ts wants to import service.ts which resides in the same directory then you shoule write the import like this:
因此，如果 file.ts 想要导入位于同一目录中的 service.ts，那么您应该像这样编写导入：
import {service} from './service'
if you write
如果你写
import {service} from 'service'
then you will get this error
那么你会得到这个错误
