Javascript Angular 2 快速入门：意外标记 <

Question

提问by muuk

I am trying to set up angular 2 according the quickstart found at http://angular.io. I have copied every file exactly as described in the guide, but when I run npm startand a browser tab opens, I get the "Loading..." with the following error in the console:

我正在尝试根据http://angular.io 上的快速入门设置 angular 2 。我完全按照指南中的描述复制了每个文件，但是当我运行npm start并打开浏览器选项卡时，我收到“正在加载...”，控制台中出现以下错误：

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

This is my app.component.ts:

这是我的app.component.ts：

import {Component} from 'angular2/core';

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

}

My boot.ts:

我的boot.ts：

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

bootstrap(AppComponent);

My index.html:

我的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>

My package.json:

我的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"
    }
}

And finally my tsconfig.json:

最后我的tsconfig.json：

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

Thanks in advance for any help.

在此先感谢您的帮助。

Answer 1

采纳答案by Isaac

Try replacing this

尝试更换这个

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

with this

有了这个

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

I was trying to apply a slightly different folder structure to their quickstart and ran into the same issue. I found that the name of the property on the "packages" object had to match the parent folder.

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

Answer 2

回答by Ben Wells

A tip for those who encounter the "Unexpected token <" error. For me, this happened when SystemJS attempted to retrieve a dependency (JavaScript file) and instead the web server returned an HTML page (hence the unexpected opening < in the html).

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

I was able to pinpoint this in Chrome's Dev Tools on the Network tab by looking through the downloaded JavaScript files one-by-one until I found the one where HTML was returned instead. This made it easy to resolve the issue with my import.

通过逐一查看下载的 JavaScript 文件，我能够在 Chrome 的“网络”选项卡上的“开发工具”中查明这一点，直到找到返回 HTML 的文件为止。这使解决我的导入问题变得容易。

Hoping we may get a more meaningful error message at some point-

希望我们能在某个时候得到更有意义的错误信息——

Answer 3

回答by dchacke

I've had similar issues with different node modules and came here from Google.

我在不同的节点模块上遇到了类似的问题，并从 Google 来到这里。

Usually, I would get the error after importing a package and then attempting to use it.

通常，我会在importing 一个包然后尝试使用它之后得到错误。

For example, I had the same issue when loading https://github.com/ngrx/store.

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

I checked my network tab and it turns out the file that was loaded for store.js (that module's main file) was not correct. It requested store.js, but got my index.html, which started with <!DOCTYPE html>, i.e. it started with a "<", which is not valid JavaScript.

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

It is not clear to me why my index.html was served in lieu of the actual JavaScript file. One explanation could be that SystemJS made a request that led nowhere and my server was configured to serve index.html as a default. I don't have enough data to prove this, though. Cum grano salis.

我不清楚为什么我的 index.html 被提供来代替实际的 JavaScript 文件。一种解释可能是 SystemJS 发出了一个没有结果的请求，我的服务器被配置为默认提供 index.html。不过，我没有足够的数据来证明这一点。暨格兰诺萨利斯。

In any case, I fixed it by explicitly telling SystemJS where a package lives if it can't find it on its own. So, for example, to fix a failing import { Store } from '@ngrx/store';, you can do:

在任何情况下，我通过明确告诉 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));

Because the Storemodule lives in that file. This way, SystemJS finds it, and the module can be imported just fine.

因为Store模块位于该文件中。这样SystemJS就找到了，模块就可以导入就好了。

Answer 4

回答by JRulle

I had a similar issue importing rx.jsI ended up solving it by adding a path to the System.config()

我在导入时遇到了类似的问题，rx.js我最终通过添加路径来解决它System.config()

System.config({
  defaultJSExtensions: true,
  paths: {
    'rx' : 'lib/rx.js'
  }
});

Answer 5

回答by Adrian Moisa

I had a similar issue, I had configured the IIS server to rewrite all paths to index.htmlin order to get the router working properly. (Page refresh was returning 404. Read details in this answer)

我有一个类似的问题，我已将 IIS 服务器配置为重写所有路径，index.html以使路由器正常工作。（页面刷新返回 404。阅读此答案中的详细信息）

As user @dchackepoints out, it's because System.jsexpects a .jsfile not a .htmlfile. This indeed produces the strange message starting with SyntaxError: Unexpected token <. Temporarely disabling the URL rewriting allows me to see the real issue.

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

When importing child components into parent components System.jscan get confused if paths are not declared properly.

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

For example parent.component.tshas the following import:

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

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

Throws this error:

抛出这个错误：

GET app/parentComponentFolder/childComponentFolder/childComponent.js 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading app/parentComponentFolder/childComponentFolder/childComponent.js

Changing the import instruction path from relative to absolute path solves the issue:

将导入指令路径从相对路径更改为绝对路径即可解决问题：

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

Mapping the path in system.config.js could also do the trick, but I find it harder to maintain because it's not readily apparent why the import path works or not. Now I can uncomment the rewrite rules in Web.configand all works just fine.

在 system.config.js 中映射路径也可以做到这一点，但我发现它更难维护，因为导入路径为何有效或无效的原因并不明显。现在我可以取消对重写规则的注释，Web.config并且一切正常。

Edit:

编辑：

It seems that typescript transpiler is very picky about paths. Only relative paths pass without throwing errors:

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

Basically you need to step back up one folder from parentComponentFolder/to app/folder.

基本上你需要从退一步了一个文件夹parentComponentFolder/到app/文件夹中。

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

Answer 6

回答by jdewit

A trailing comma in your systemjs configuration will cause this.

systemjs 配置中的尾随逗号会导致这种情况。

Check the systemjs.config.tsfile and make sure the json is valid.

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

Answer 7

回答by Nayfin

I had a similar bug. I got:

我有一个类似的错误。我有：

Uncaught SyntaxError: Unexpected token =  (index):16

because I tossed a semicolon at the end of the @Input()in the hero-detail.componentfile.

因为我@Input()在hero-detail.component文件的末尾扔了一个分号。

Hope this helps somebody.

希望这可以帮助某人。

Answer 8

回答by brando

I ran into this same problem. I fixed it by implementing the following in my index.html (note: I put the angular2 js dependencies in 'lib' folder):

我遇到了同样的问题。我通过在 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 {
    
    
}

Wish I could tell you why this works and the angular2 quickstart boilerplate doesn't.

希望我能告诉你为什么这有效而 angular2 快速入门样板没有。

Answer 9

回答by vt5491

I was getting a similar problem:

我遇到了类似的问题：

Unexpected token ]

When starting the server. Turns out I had a trailing comma in my tsconfig.json:

启动服务器时。原来我的中有一个尾随逗号tsconfig.json：

...
  "files": [
    "app.ts",
    "typings.d.ts",
    "abc-vt/abc-vt",   <-Doh!
  ]

Lesson: Don't just assume it's an error in your source code -- check your config files as well.

教训：不要只是假设这是您的源代码中的错误——还要检查您的配置文件。

Answer 10

回答by Steve S

In my case, I'd inadvertently included the file extension on the import...

就我而言，我无意中在导入时包含了文件扩展名...

import {SomeComponent} from 'some.component.ts';

And (obviously!) it should have been...

而且（显然！）它应该是......

import {SomeComponent} from 'some.component';

Javascript Angular 2 快速入门：意外标记 <

提问by muuk

采纳答案by Isaac

回答by Ben Wells

回答by dchacke

回答by JRulle

回答by Adrian Moisa

回答by jdewit

回答by Nayfin

回答by brando

回答by vt5491

回答by Steve S

相关推荐

最近更新

标签

Javascript Angular 2 快速入门：意外标记 <

提问by muuk

采纳答案by Isaac

回答by Ben Wells

回答by dchacke

回答by JRulle

回答by Adrian Moisa

回答by jdewit

回答by Nayfin

回答by brando

回答by vt5491

回答by Steve S

相关推荐

Javascript React - 如何仅捕获父级的 onClick 事件而不捕获子级

Javascript jQuery ajax，等到 beforeSend 动画完成

Javascript SyntaxError: JSON.parse() 的 Object.parse（本机）NodeJS 处的意外标记 u

Javascript javascript复选框启用/禁用

相关推荐

最近更新

标签