javascript - โทเค็น export ที่ไม่คาดคิด

ในฐานะผู้เริ่มต้น Angular คนใหม่ ฉันกำลังพยายามอัปเกรดเว็บแอป Angular 2.0.0-beta17 ที่เคยใช้งานได้ของฉันไปเป็น Angular 2.3.0 ตอนนี้ฉันมีปัญหาในขณะโหลด/บู๊ตแอป

นี่คือการตั้งค่าของฉัน:

เพื่อวัตถุประสงค์ในการแก้ปัญหา ตอนนี้ฉันได้คัดลอกโฟลเดอร์ node_modules ทั้งหมดในไดเรกทอรีเว็บแล้ว ดังนั้นจึงไม่ควรมีไฟล์ใดหายไป

(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 ดังนั้นมันจึงเป็นปัจจุบัน

{
  "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 (เฉพาะส่วนสคริปต์):

ฉันตั้งเส้นทางให้สอดคล้องกับโครงสร้างไฟล์/ไดเรกทอรีของฉัน

<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 (ซึ่งถูกแปลงเป็น js สำเร็จโดย gulpfile ของฉัน) พยายามโหลด angular-core ที่บรรทัดที่ 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) ดูเหมือน จะถูกเตรียมไว้อย่างถูกต้อง มีไฟล์ไลบรารีที่ถูกโหลด ไม่มี 404 หรืออะไรทำนองนั้น แต่ข้อผิดพลาดนี้คือสิ่งที่ฉันได้รับตลอด:

> (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 หลายชั่วโมงแล้ว แต่ไม่มีวิธีแก้ปัญหาที่คล้ายกันสามารถใช้ได้กับกรณีนี้ ทำอย่างไรถึงจะแก้ไขได้ ขอบคุณมากล่วงหน้า!

ป.ล. ฉันสามารถให้ที่เก็บข้อมูลได้ ถ้าจำเป็น กรุณาขอมาได้เลย!

คำตอบ #1

ตามที่เราสามารถเห็นจากการติดตามสต็อกร่องรอยข้อผิดพลาด มันล้มเหลวในการแยกวิเคราะห์ @angular/core/index.js ขณะที่คุณกำลังแปลงไฟล์ซอร์สของคุณเอง Angular ถูกปรับใช้เป็นโมดูล ES2015 พร้อมไวยากรณ์ ES5 คุณต้องใช้เวอร์ชัน ES5 บริสุทธิ์ ซึ่งฉันแนะนำให้ใช้ไฟล์ UMD ที่ปรับใช้อยู่

อัปเดตไฟล์ systemjs.config.js ของคุณแบบนี้:

// 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 quickstart) ก็เป็นจุดเริ่มต้นที่ดี หรือจะใช้ angular-cli ก็ได้ นี่ดีกว่าสำหรับระยะยาว

แหล่งที่มา: https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js