Unerwarteter Token-Export

Question

Als neuer Angular Rookie versuche ich, meine zuvor funktionierende Angular 2.0.0-beta17 Web-App auf Angular 2.3.0 aufzurüsten. Jetzt habe ich ein Problem beim Laden/Booten der App.

Hier ist mein Setup:

Für Lösung Zwecke Ich kopierte alle node_modules im Web-Verzeichnis für jetzt. Also sollten keine Dateien fehlen.

(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

ich verworfen und bauten die Module jedes Mal, wenn ich die package.json geändert Ordner. so ist es aktuell.

{ 
    "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 (nur das Skript Teil):

Ich habe die Pfade entsprechend meiner Datei/Verzeichnisstruktur.

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

Die boot.ts (die erfolgreich js durch meine gulpfile übersetzt wird) versucht Winkelkern in Zeile vor 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); 

Alles zu laden (index.html) scheint richtig vorbereitet zu sein. Es sind lib-Dateien geladen, keine 404s oder so. Aber das ist der Fehler, den ich erhalte:

> (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 

Ich suchte Google und Stackoverflow für Stunden jetzt und keine Lösung für ähnliche Probleme ist für diesen Fall arbeiten. Wie kann das gelöst werden? Vielen Dank im Voraus!

PS. Ich kann das Repository bei Bedarf bereitstellen. Bitte frage einfach!

Answer 1

Wie wir aus der Fehler-Stack-Trace sehen können, fehlgeschlagen Parsing @angular/core/index.js. Während Sie Ihre eigenen Quelldateien transpilieren, wird angular als ES2015-Module mit ES5-Syntax bereitgestellt. Sie müssen eine reine ES5-Version verwenden, die ich die bereitgestellten UMD-Dateien vorschlage.

Aktualisieren Sie Ihre systemjs.config.js wie folgt aus:

// 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', 

Oder vielmehr eine bestehende Arbeitseinstellung (wie Winkelquickstart) verwenden, ist es ein guter Anfang. Oder nutzen Sie eckig-cli, das ist auf lange Sicht besser.

Quelle: https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js