予期しないトークンのエクスポート

Question

新しいAngular新人として、以前に働いていたAngular 2.0.0-beta17 web-appを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

は（成功した私のgulpfileでJSに変換されます）のindex.html（System.import前のラインで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); 

すべての角度のコアをロードしよう）はと思われます。 ロードされたlibファイルがありますが、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を検索し、同様の問題への解決策は、この場合のために働いていません。どのようにこれを解決することができますか？事前にありがとう！

PS。必要に応じてリポジトリを提供することができます。お願いしてください！

Answer 1

エラースタックトレースからわかるように、構文解析に失敗するのは@angular/core/index.jsです。独自のソースファイルを作成している間、angleはES5構文のES2015モジュールとしてデプロイされます。純粋な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', 

というか（角クイックスタートのような）既存の作業セットアップを使用し、それは良いスタートです。それとも、角度CLIを使用して、これは長期的には良いです。

ソース：https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js