Angular 2快速入门：意外的令牌<
我试图根据在http://angular.iofind的quickstart设置angular2。 我已经完全按照指南中的描述复制每个文件，但是当我运行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
这是我的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" ] }
在此先感谢您的帮助。
尝试replace这个
System.config({ packages: { format: 'register', defaultExtension: 'js' } });
有了这个
System.config({ packages: { app: { // must match your folder name format: 'register', defaultExtension: 'js' } } });
我试图将一个稍微不同的文件夹结构应用到他们的快速入门，并遇到同样的问题。 我发现“packages”对象上的属性名称必须与父文件夹匹配。
对于遇到“意外标记<”错误的提示。 对于我来说，这发生在SystemJS尝试检索依赖项（JavaScript文件）时，而是由Web服务器返回了一个HTML页面（因此在HTML中出现了意外的开头<）。
通过逐个浏览下载的JavaScript文件，直到find返回HTML的文件，我才能在Chrome的“开发工具”中查find这一点。 这可以很容易地解决我的导入问题。
希望我们能够在某个时刻获得更有意义的错误信息，
我遇到过不同节点模块的类似问题，并从Google来到这里。
通常情况下，我会在import一个包后尝试使用它。
例如，我加载https://github.com/ngrx/store时遇到同样的问题。;
我检查了我的networking选项卡，结果为store.js（该模块的主文件）加载的文件不正确。 它要求store.js，但得到了我的index.html，它以<!DOCTYPE html>开头，也就是以“<”开头，这个JavaScript是无效的。
我不清楚为什么我的index.html代替了实际的JavaScript文件。 一个解释可能是，SystemJS提出了一个无处不在的请求，我的服务器被configuration为默认提供index.html。 虽然我没有足够的数据来certificate这一点。 Cum grano salis。
在任何情况下，我都明确告诉SystemJS，如果它自己找不到它，程序包会在哪里生存。 因此，例如，要修复import { Store } from '@ngrx/store';的失败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发现它，模块可以被导入就好了。
我有一个类似的问题，导入rx.js我最终通过添加一个path到System.config()
System.config({ defaultJSExtensions: true, paths: { 'rx' : 'lib/rx.js' } });
我有一个类似的问题，我已经configurationIIS服务器重写所有的pathindex.html为了让路由器正常工作。 （页面刷新正在返回404。 在这个答案中阅读详细信息 ）
用户@dchacke指出，这是因为System.js期望.js文件不是.html文件。 这确实会产生以SyntaxError: Unexpected token <开头的奇怪消息SyntaxError: Unexpected token < 。 暂时禁用URL重写允许我看到真正的问题。
将子组件导入父组件时如果path没有正确声明， System.js可能会感到困惑。
例如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
将导入指令path从相对path更改为绝对path可解决此问题：
import { ChildComponent } from 'app/childComponentFolder/childComponent';
在system.config.js中映射path也可以做到这一点，但我觉得难以维护，因为导入path为什么不起作用。 现在我可以在Web.config取消注释重写规则，所有的工作都很好。
编辑：
似乎打字机的译员是非常挑剔的path。 只有相对path通过而没有抛出错误：
基本上你需要从parentComponentFolder/到app/文件夹备份一个文件夹。
import { ChildComponent } from '../childComponentFolder/childComponent';
我遇到了同样的问题。 我通过在我的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>
我遇到了类似的问题：
Unexpected token ]
启动服务器时。 原来我在我的tsconfig.json有一个尾随的逗号：
... "files": [ "app.ts", "typings.d.ts", "abc-vt/abc-vt", <-Doh! ]
教训：不要仅仅假设你的源代码中有错误，也请检查你的configuration文件。
在您的systemjsconfiguration中的尾随逗号将导致这种情况。
检查systemjs.config.ts文件并确保json是有效的。
我有一个类似的错误。 我有：
Uncaught SyntaxError: Unexpected token = (index):16
因为我在hero-detail.component文件中@Input()的末尾扔了一个分号。
希望这有助于某人。
在我的情况下，我会无意中包括文件扩展名的导入…
import {SomeComponent} from 'some.component.ts';
（显然！）应该是…
import {SomeComponent} from 'some.component';
这个问题的主要原因是您要导入的文件是一个html文件，而不是一个js文件。 您可以使用Chrome中的networking标签查看实际导入的文件。
我的问题没有通过上述方法解决。 对我来说，这是因为我已经将所有默认路由路由到index.html页面，这是我如何在Visual Studio Enterprise中获得Angular深层链接。 当我请求一个没有扩展名的文件，并且找不到那个文件时，它会提供默认的index.html页面，这个页面将以一个<字符开头，并且失败。
给我的赠品是，当我把完整的path确切的文件，它会工作。
无论如何，为了解决这个问题，我必须在我的RouteConfig.cs文件中为node_modules文件夹添加Ignore路由：
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("node_modules/{*pathInfo}"); }
我收到了同样的错误信息。 类似于其他人提到的，我的情况是由URL重写，服务的HTML而不是由angular预期的JavaScript。
我正在使用lite-server / browser-sync在本地开发和托pipe我的应用程序。 为了使angular路由正常工作，我正在使用
var history = require('connect-history-api-fallback')
将相关的pushState导航redirect回index.html。 最终，我的打字稿导入错误configuration导致一个请求不被识别为一个js文件，而是redirect到index.html。 困难是如何弄清楚。
我发现您可以为connect-history-api-fallback启用详细日志logging。
middleware: [history({ index: '/src/index.html', verbose: true })]
然后导致我通过扫描redirect条目的日志find罪魁祸首：
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
对于那些阅读整个事情并没有发现任何有趣的事情，我可能有另一种select给你。
我遇到了同样的问题，因为网站部署在多个Web服务器上。 问题与部署在某些服务器上的不同构build有关。
基本上，你有一个服务器与一个版本和另一个服务器与其他版本。 所以，当然当你负载平衡的时候，你可能会在某些服务器上的某些资源上获得404，因为版本是不同的（请记住main.xxxxx.js，其中xxx在每个版本中都是不同的）。 如果你configuration你的networking服务器返回一个404网页 – 这发生了很多我猜 – 你得到一些HTML而不是JS文件，然后意外的标记。
所以，请检查每个服务器上的版本！
对我来说，这个错误是由于我用一个简单的节点快递服务器来服务我的angular度前端，
app.use('/*', (req, res) => { res.sendFile(path.join(__dirname,'index.html')); });
但是我忘了指定所有的静态文件都应该从当前目录中提供：
app.use(express.static(__dirname));
所以每一个静态资产的调用返回index.html。 Woops。 一旦我添加了这一行，一切都很好。 希望这可以帮助别人下线:)
- 相当于Angular 2中的$编译
- 错误的angular度testing无法在“XMLHttpRequest”上执行“发送”
- Angular2 canActivate（）调用asynchronous函数
- 在Android中的canvas上旋转图像
- 如何在rxjs中返回一个空的observable
- 在Angular2-View中，在INPUT元素的ngModel中使用pipe道
- rxjs / Subject.d.ts错误：Class'Subject <T>'错误地扩展了基类'Observable <T>'
- 如何在Angular 2中创build启用CORS的HTTP请求？
- 公式px到dp，dp到px android
