Question

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

通常这些错误说明了我错误编写了一段代码。但是Chrome控制台告诉我error发生在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 { }

Answer 1

所以上面的答案似乎是正确的，但这里有一些关于错误本身的信息（仅针对遇到同样问题的其他人，想知道他们做错了什么），因为它可以用字面意思每个导入并很难追查。

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

/通常转换为/index.html，第一个字符通常是<（主要是<!DOCTYPE html>的开头），因为这不是有效的javascript，浏览器会抛出非法令牌例外。

Answer 2

您有几个问题：

你的组件选择器是：＆＃39; my-app＆＃39;

<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

我想，你已经安装了角度2测试版。在这种情况下，您必须安装其他模块：

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 4

在我的情况下，错误来自忘记包括

＆＃13;

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

＆＃13;

index.html

中的

Answer 5

就我而言，我有

import {Observable} from 'rxjs/rx';

这是错误的。

我改为

import {Observable} from 'rxjs/Rx';

问题消失了。因此请注意区分大小写。

Answer 6

使用Angular 2快速入门中推荐的rxjs v5.0.0-beta.0软件包进入测试版3。我从npm包切换到Angular beta CDN上的包，它工作正常。

<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>

Answer 7

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

import * as Rx from 'rxjs';

到

import * as Rx from 'rxjs/Rx';

Answer 8

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

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

import {service} from './service'

如果你写

import {service} from 'service'

然后你会得到这个错误

Answer 9

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

我必须在Systemjs配置System.config({})

中插入这行代码

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

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

source

angular2：Uncaught SyntaxError：意外的令牌＆lt;

9 个答案: