angular2: Uncaught SyntaxError: Unexpected token <

Question

每当我尝试运行我的 angular2 应用程序时，我总是收到此错误 Uncaught SyntaxError: Unexpected token <。这只是在angular2网站routing 'tutorial'的基础上做的修改。

通常这些类型的错误说明了我写错一段代码的地方。但是 Chrome 控制台告诉我 error 出现在 angular2 js 文件中。

阅读并尝试 Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL and 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 { }

Answer 1

我想，您已经安装了 angular 2 beta 版。在这种情况下，您必须安装额外的模块：

npm install es6-promise@^3.0.2 es6-shim@^0.33.3 reflect-metadata@0.1.2 rxjs@^5.0.0-beta.0 zone.js@0.5.10 --save

并导入这些脚本：

<!-- 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>

编辑：

事实上，这些更改是在 alpha 49

中引入的

Answer 2

您有几个问题：

您的组件选择器是：'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 您的代码

Answer 3

在我的例子中，错误来自于忘记包含

<script src="node_modules/angular2/bundles/router.min.js"></script>

在index.html

Answer 4

运行使用 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>

Answer 5

运行今天使用 Angular 2.0.0-beta.0 和 rxjs。不得不改变

import * as Rx from 'rxjs';

至

import * as Rx from 'rxjs/Rx';

Answer 6

所以上面的答案似乎是正确的，但这里有一些关于错误本身的信息（仅供运行遇到同样问题的其他人想知道他们做错了什么）因为它可以字面上显示 each single 导入并且很难追踪。

只要需要文件并且网络服务器配置为只提供 / 而不是 404-file-not-found-page，它就会出现。

/ 通常然后转换为 /index.html 并且第一个字符通常是 < （主要是 <!DOCTYPE html> 的开头）并且因为那是无效的 javascript 浏览器抛出非法令牌异常。

Answer 7

确保在导入时添加完整路径。还要确保在同一目录中导入的文件前面添加 ./。

因此，如果 file.ts 想要导入驻留在同一目录中的 service.ts，那么您应该像这样编写导入：

import {service} from './service'

如果你写

import {service} from 'service'

然后你会得到这个错误

Answer 8

就我而言，我有

import {Observable} from 'rxjs/rx';

出现错误。

我改成了

import {Observable} from 'rxjs/Rx';

问题消失了。所以注意区分大小写。

Answer 9

这是由于 SystemJS 试图从相对路径而不是库本身获取 rxjs 方法

我不得不在 Systemjs 配置中插入这行代码 System.config({})

paths: {
 'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
}

我花了几个小时才找到这个解决方案

source

angular2: Uncaught SyntaxError: Unexpected token <

angular2: Uncaught SyntaxError: Unexpected token <

javascript

syntax-error

token

typescript

angular