Angular 2快速入门：意外令牌<-Java 学习之路

我试图根据http://angular.io发现的快速启动来设置角度2 . 我完全按照指南中的描述复制了每个文件，但是当我运行 npm start 并打开浏览器选项卡时，我在控制台中收到"Loading..."并出现以下错误：

Uncaught SyntaxError: Unexpected token <                        (program):1
     __exec @ system.src.js:1374
Uncaught SyntaxError: Unexpected token <          angular2-polyfills.js:138
    Evaluating http://localhost:3000/app/boot
    Error loading http://localhost:3000/app/boot

这是我的 app.component.ts ：

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>`
})
export class AppComponent {

}

我的 boot.ts ：

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

我的 index.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular 2 Quick Start</title>

    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <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>
    System.config({
        packages: {
            format: 'register',
            defaultExtension: 'js'
        }
    });

    System.import('app/boot')
        .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

我的 package.json ：

{
    "name": "angular2-quickstart",
    "version": "0.1.0",
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "MIT",
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "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"
    },
    "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
    }
}

最后我的 tsconfig.json ：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

在此先感谢您的帮助 .

14 回答

尝试替换它

System.config({
        packages: {
            format: 'register',
            defaultExtension: 'js'
        }
    });

有了这个

System.config({
        packages: {
            app: { // must match your folder name
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });

我试图在他们的快速入门中应用稍微不同的文件夹结构并遇到同样的问题 . 我发现“packages”对象上的属性名称必须与父文件夹匹配 .

回复于 2024-04-26T16:40:55+08:00

19

对于遇到“意外令牌<”错误的人的提示 . 对我来说，这发生在SystemJS试图检索依赖项（JavaScript文件）而Web服务器返回HTML页面（因此html中意外打开<）时 .

通过逐个查看下载的JavaScript文件，我能够在Chrome的网络选项卡上的开发工具中查明这一点，直到我找到了返回HTML的文件 . 这使我可以轻松解决导入问题 .

希望我们可以在某些时候得到更有意义的错误信息 -

回复于 2024-04-26T16:40:55+08:00
0
我有不同的节点模块的类似问题，来自谷歌 .

通常，我会在 import 包之后得到错误，然后尝试使用它 .

例如，加载https://github.com/ngrx/store时遇到了同样的问题 .

我检查了我的网络选项卡，结果显示为store.js加载的文件（该模块的主文件）不正确 . 它请求了store.js，但得到了我的index.html，它以 <!DOCTYPE html> 开头，即它以"<"开头，这是一个无效的JavaScript .

我不清楚为什么我的index.html被用来代替实际的JavaScript文件 . 一种解释可能是SystemJS发出的请求无处可去，我的服务器配置为默认提供index.html . 但是，我没有足够的数据来证明这一点 . Cum grano salis .

在任何情况下，我通过明确地告诉SystemJS修复它，如果它自己找不到它就会存在 . 因此，例如，要修复失败的 import { Store } from '@ngrx/store'; ，您可以执行以下操作：
```
System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: { '@ngrx/store' : '/node_modules/@ngrx/store/dist/store.js' } // <-- this!
});
System.import('src/boot')
      .then(null, console.error.bind(console));
```
因为 Store 模块存在于该文件中 . 这样，SystemJS就可以找到它，并且可以很好地导入模块 .
回复于 2024-04-26T16:40:55+08:00
2
我有一个类似的问题导入 rx.js 我最后通过添加一个路径来解决它 System.config()
```
System.config({
  defaultJSExtensions: true,
  paths: {
    'rx' : 'lib/rx.js'
  }
});
```
回复于 2024-04-26T16:40:55+08:00
2
我有一个类似的问题，我已经配置IIS服务器重写所有路径 index.html ，以使路由器正常工作 . （页面刷新返回404. Read details in this answer）

正如用户@dchacke指出的那样，这是因为 System.js 期望 .js 文件不是 .html 文件 . 这确实产生了以 SyntaxError: Unexpected token < 开头的奇怪消息 . 暂时禁用URL重写可以让我看到真正的问题 .

将子组件导入父组件时如果路径未正确声明，_1659769可能会感到困惑 .

例如 parent.component.ts 具有以下导入：

import { ChildComponent } from './childComponentFolder/childComponent';

抛出此错误：
```
GET app/parentComponentFolder/childComponentFolder/childComponent.js 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading app/parentComponentFolder/childComponentFolder/childComponent.js
```
将导入指令路径从相对路径更改为绝对路径可解决此问题：

import { ChildComponent } from 'app/childComponentFolder/childComponent';

在system.config.js中映射路径也可以做到这一点，但我发现它很难维护，因为导入路径无论何时起作用都不明显 . 现在我可以取消注释 Web.config 中的重写规则，一切正常 .

Edit:

打字稿似乎对路径非常挑剔 . 只有相对路径通过而不会抛出错误：

基本上你需要从 parentComponentFolder/ 步骤备份一个文件夹到 app/ 文件夹 .

import { ChildComponent } from '../childComponentFolder/childComponent';
回复于 2024-04-26T16:40:55+08:00

-1

我遇到了同样的问题 . 我通过在index.html中实现以下内容来修复它（注意：我将angular2 js依赖项放在'lib'文件夹中）：

<html>

<head>
    <title>Desktop main</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
   
    <script src="~/lib/anguar2/angular2-polyfills.js"></script>
    <script src="~/lib/es6-shim/es6-shim.js"></script>
    <script src="~/lib/systemjs/system.src.js"></script>
    <script>

    System.config({
        defaultJSExtensions: true

    });

    </script>
    <script src="~/lib/rxjs/rx.js"></script>
    <script src="~/lib/anguar2/angular2.dev.js"></script>
    <script>
    System.import('app/boot');
    </script>
</body>

</html>

app.component.ts看起来像这样：

import {Component} from "angular2/core";

@Component({
    selector: "my-app",
    template: "<h1>Hello Angular 2</h1>"
})
export class AppDesktopComponent {
    
    
}

希望我能告诉你为什么这样做，而angular2快速启动样板却没有 .

回复于 2024-04-26T16:40:55+08:00

1
我遇到了类似的问题：
```
Unexpected token ]
```
启动服务器时 . 结果我的 tsconfig.json 中有一个尾随的逗号：
```
...
  "files": [
    "app.ts",
    "typings.d.ts",
    "abc-vt/abc-vt",   <-Doh!
  ]
```
经验教训：不要只是假设它是源代码中的错误 - 也请检查配置文件 .
回复于 2024-04-26T16:40:55+08:00
0
在我的情况下，我无意中在导入中包含了文件扩展名...
```
import {SomeComponent} from 'some.component.ts';
```
并且（显然！）应该有是...
```
import {SomeComponent} from 'some.component';
```
回复于 2024-04-26T16:40:55+08:00
2

systemjs配置中的尾随逗号将导致此错误 .

检查 systemjs.config.ts 文件并确保json有效 .

回复于 2024-04-26T16:40:55+08:00
2
我有一个类似的错误 . 我有：
```
Uncaught SyntaxError: Unexpected token =  (index):16
```
因为我在 hero-detail.component 文件的 @Input() 末尾抛出了一个分号 .

希望这有助于某人 .
回复于 2024-04-26T16:40:55+08:00
46
此问题的主要原因是您尝试导入的文件是html文件，而不是js文件 . 您可以使用Chrome中的网络标签查看此实际导入的文件 .

我的问题没有通过上述方法解决 . 对我来说，这是因为我已经将所有默认路由路由到index.html页面，这就是我在Visual Studio Enterprise中使用Angular深层链接的方式 . 当我请求没有扩展名的文件，并且找不到该文件时，它将提供默认的index.html页面，该页面以<字符开头，然后失败 .

对我来说，赠品是当我将完整路径放到确切文件时，它会起作用 .

无论如何，为了解决这个问题，我必须在RouteConfig.cs文件中为node_modules文件夹添加一个Ignore路由：
```
public static void RegisterRoutes(RouteCollection routes)
{
   routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   routes.IgnoreRoute("node_modules/{*pathInfo}");

}
```
回复于 2024-04-26T16:40:55+08:00
34
我收到了同样的错误消息 . 与其他人提到的类似，我的情况是由url重写引起的，提供html而不是angular预期的javascript .

我正在使用lite-server / browser-sync在本地开发和托管我的应用程序 . 为了使角度路由正常工作，我正在使用
```
var history = require('connect-history-api-fallback')
```
将相关的pushState导航重定向回index.html . 最终，我的打字稿导入错误配置导致一个请求未被识别为js文件，而是重定向到index.html . 困难在于如何弄明白 .

我发现您可以为connect-history-api-fallback启用详细日志记录 .
```
middleware: [history({
        index: '/src/index.html',
        verbose: true
    })]
```
然后通过扫描日志重定向条目让我找到了罪魁祸首：
```
Not rewriting GET /node_modules/systemjs/dist/system.js because the path includes a dot (.) character.
Not rewriting GET /node_modules/core-js/client/shim.min.js because the path includes a dot (.) character.
Rewriting GET /src/culprit to /src/index.html
```
回复于 2024-04-26T16:40:55+08:00
4

对于那些阅读了整篇文章并且没有发现任何有趣内容的人，我可能会为您提供另一种选择 .

我遇到了同样的问题，因为该网站部署在多个Web服务器上 . 该问题与部署在某些服务器上的不同构建有关 .

基本上，您有一个服务器有一个版本，另一个服务器有一些其他版本 . 所以，当然当你负载 balancer 时，你可能会在某些服务器上的某些资源上获得404，因为版本不同（请记住main.xxxxx.js，其中xxx在每次构建时都不同） . 如果你将你的网络服务器配置为返回一个404网页 - 我想这会发生很多 - 你会得到一些HTML而不是JS文件然后是意外的令牌 .

所以，检查每个服务器上的版本！

回复于 2024-04-26T16:40:55+08:00
2
对我来说，这个错误是因为我使用简单的节点快速服务器为我的角度前端服务的：
```
app.use('/*', (req, res) => {
    res.sendFile(path.join(__dirname,'index.html'));
});
```
但我忘了指定所有静态文件应该从当前目录中提供：
```
app.use(express.static(__dirname));
```
因此，静态资产的每次调用都返回index.html . Woops . 一旦我添加了那条线，一切都很好 . 希望这可以帮助有人下线:)
回复于 2024-04-26T16:40:55+08:00

Angular 2快速入门：意外令牌<

14 回答

相关问题