angular2:未捕获的语法错误:意外的令牌<

angular2: Uncaught SyntaxError: Unexpected token <

本文关键字：令牌 意外 语法 angular2 错误      更新时间：2023-09-26

每当我尝试运行我的 angular2 应用程序时，我都会Uncaught SyntaxError: Unexpected token <收到此错误。这只是基于 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中的某个地方。

引导.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 { }

索引.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 { }

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

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

/通常转换为/index.html，并且第一个字符通常是<(主要是<!DOCTYPE html>的开头(，并且由于这不是有效的javascript，浏览器会抛出非法令牌异常。

您有几个问题：

您的组件选择器是："我的应用程序">

<app>Loading...<app>

应该是

<my-app>Loading...</my-app>

此外，您导入了错误的文件：

System.import('app/app');

应该是

System.import('app/boot');

另外，除非你将打字稿编译为java脚本......否则你应该改变这一行并导入打字稿.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>

这是您的代码工作

我想

，你已经安装了angular 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 中引入

就我而言，错误来自忘记包含

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

在索引中.html

就我而言，我有

import {Observable} from 'rxjs/rx';

这是给出的错误。

我改成了

import {Observable} from 'rxjs/Rx';

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

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

今天使用 Angular 2.0.0-beta.0 和 rxjs 遇到了这个问题。不得不改变

import * as Rx from 'rxjs';

自

import * as Rx from 'rxjs/Rx';

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

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

import {service} from './service'

如果你写 

import {service} from 'service'

然后你会得到这个错误

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

。

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

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

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

源

相关文章：