意外的令牌导出 [英] Unexpected token export
问题描述
作为新的Angular新秀，我正在尝试将以前使用的Angular 2.0.0-beta17网络应用程序升级到Angular 2.3.0.现在，在加载/启动应用程序时出现问题.
As a new Angular rookie, I am trying to upgrade my previously working Angular 2.0.0-beta17 web-app to Angular 2.3.0. Now I have a problem while loading/booting the app.
这是我的设置:
出于解决方案的目的，我现在将所有node_modules复制到了Web目录中.因此，不应丢失任何文件.
For solution purposes, I copied all node_modules in the web directory for now. So no files should be missing.
(web directory)
├── index.html
├── js
│ ├── boot.js
│ ├── boot.js.map
│ ├── feedback-form.component.js
│ ├── feedback-form.component.js.map
│ ├── feedback-form.service.js
│ ├── feedback-form.service.js.map
│ ├── lib
│ │ └── *all node modules*
│ ├── ui-molecule.component.js
│ └── ui-molecule.component.js.map
└── views
├── feedback-form.html
└── ui-molecule.html
package.json
每次更改package.json时，我都会丢弃并重建modules文件夹.所以它是最新的.
I discarded and rebuilt the modules folder every time I changed the package.json. so it is current.
{
"name": "FeedbackFormWebApp",
"version": "0.0.1",
"author": "Martin Labuschin",
"description": "...",
"repository": "...",
"license": "MIT",
"devDependencies": {
"@angular/core": "2.3.0",
"systemjs": "0.19.41",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.2",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.7.2",
"gulp": "^3.9.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-typescript": "3.1.3",
"gulp-webserver": "^0.9.1",
"del": "2.2.2",
"@angular/router": "3.3.0",
"@angular/common": "2.3.0",
"@angular/platform-browser": "2.3.0",
"@angular/platform-browser-dynamic": "2.3.0",
"@angular/http": "2.3.0",
"@angular/compiler": "2.3.0",
"typescript": "2.1.4",
"minimatch": "3.0.2",
"graceful-fs": "^4.0.0"
}
}
index.html (仅脚本部分):
我为文件/目录结构设置了相应的路径.
I set the paths accordingly to my file/directory structure.
<script type="text/javascript" src='/js/lib/es6-shim/es6-shim.min.js'></script>
<script type="text/javascript" src="/js/lib/rxjs/bundles/Rx.min.js"></script>
<script type="text/javascript" src="/js/lib/zone.js/dist/zone.min.js"></script>
<script type="text/javascript" src="/js/lib/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src='/js/lib/systemjs/dist/system.src.js'></script>
<script type="text/javascript">
System.config({
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
'@angular/*': 'js/lib/@angular/*/index.js',
'rxjs/*': 'js/lib/rxjs/*.js'
}
});
System.import('js/boot').catch(function(err){ console.error(err); });
</script>
boot.ts (已由我的gulpfile成功转换为js)尝试在第1行加载angular-core.
The boot.ts (which is successfully translated to js by my gulpfile) tries to load angular-core at line 1.
import '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Http, Response, Headers } from '@angular/http';
import { FeedbackFormComponent } from './feedback-form.component';
platformBrowserDynamic().bootstrapModule(FeedbackFormComponent);
System.import(index.html)之前的所有内容似乎要进行适当的准备. 已加载lib文件，没有404左右.但这是我不断得到的错误:
Everything before System.import (index.html) seems to be properly prepared. There are lib files loaded, no 404s or so. But this is the error I keep getting:
> (index):28 Error: (SystemJS) Unexpected token export SyntaxError:
> Unexpected token export
> at eval (<anonymous>)
> at e.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15094)
> at n.run (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:12458)
> at http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:10100
> at e.invokeTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15723)
> at n.runTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:13076)
> at a (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:9146)
> at XMLHttpRequest.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:16876)
> Evaluating http://localhost:8000/js/lib/@angular/core/index.js Error
> loading http://localhost:8000/js/lib/@angular/core/index.js as
> "@angular/core" from http://localhost:8000/js/boot.js
> at eval (<anonymous>)
> at e.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15094)
> at n.run (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:12458)
> at http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:10100
> at e.invokeTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15723)
> at n.runTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:13076)
> at a (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:9146)
> at XMLHttpRequest.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:16876)
> Evaluating http://localhost:8000/js/lib/@angular/core/index.js Error
> loading http://localhost:8000/js/lib/@angular/core/index.js as
> "@angular/core" from http://localhost:8000/js/boot.js
我已经搜索了Google和Stackoverflow数小时，并且在这种情况下没有解决类似问题的解决方案.如何解决呢?提前非常感谢！
I searched Google and Stackoverflow for hours now and no solution to similar problems is working for this case. How can this be solved? Thanks so much in advance!
PS.如有必要，我可以提供存储库.请问一下！
PS. I can provide the repository, if necessary. Please just ask!
推荐答案
从错误堆栈跟踪中可以看到，它无法解析@angular/core/index.js.在转录自己的源文件时，angular被部署为具有ES5语法的ES2015模块.您必须使用纯ES5版本，建议您使用已部署的UMD文件.
As we can see from the error stack trace, it fails parsing @angular/core/index.js. While you are tranpiling your own source files, angular is deployed as ES2015 modules with ES5 syntax. You have to use a pure ES5 version, which I suggest the deployed UMD files.
像这样更新您的systemjs.config.js:
Update your systemjs.config.js like this:
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
或者使用现有的工作设置(例如角度快速启动)，这是一个很好的开始.还是使用angular-cli，从长远来看这会更好.
Or rather use a existing working setup (like angular quickstart), it is a good start. Or yet use angular-cli, this is better for the long term.
这篇关于意外的令牌导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
