Angular 2: SyntaxError: Unerwartetes Token <

Ich weiß, dass diese Art von Fragen bereits gestellt werden und ich habe mich auch auf alle diese beantworteten Fragen bezogen, aber ich konnte das Problem nicht lösen. Dieser Fehler tritt genau dann auf, wenn ich import 'rxjs/add/operator/fromArray'; ausspreche. Außer dieser import und Observable.fromArray funktioniert der Code einwandfrei. Ich bin auf Winkel 2.0.0-beta.7Angular 2: SyntaxError: Unerwartetes Token <

Fehler auf der Konsole geworfen auf

SyntaxError: Unexpected token <(…) 
Zone.run          @angular2-polyfills.js:1243 
zoneBoundFn         @angular2-polyfills.js:1220 
lib$es6$promise$$internal$$tryCatch   @angular2-polyfills.js:468 
lib$es6$promise$$internal$$invokeCallback  @angular2-polyfills.js:480 
lib$es6$promise$$internal$$publish    @angular2-polyfills.js:451 
lib$es6$promise$$internal$$publishRejection @angular2-polyfills.js:401 
(anonymous function)       @angular2-polyfills.js:123 
Zone.run          @angular2-polyfills.js:1243 
zoneBoundFn         @angular2-polyfills.js:1220 
lib$es6$promise$asap$$flush     @angular2-polyfills.js:262

app.component.ts

import {Component} from "angular2/core"; 
    import {Observable} from "rxjs/Rx"; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/debounceTime'; 
    import 'rxjs/add/operator/fromArray'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
      <input type="text" class="form-control" placeholder="Search..."> 
      ` 
    }) 

export class AppComponent { 
constructor(){ 
    var startDates = []; 
    var startDate = new Date(); 

    for (var day = -2; day <=2; day++){ 
     var date = new Date(
      startDate.getFullYear(), 
      startDate.getMonth(), 
      startDate.getDate() + day); 
    } 

    startDates.push(date); 

    Observable.fromArray(startDates) 
     .map(date => { 
        console.log('Getting deal for the date ' + date); 
        return [1, 2, 3]; 
        }) 
     .subscribe(x => console.log(x)); 

    } 
}

Index .html

<html> 
    <head> 
     <title>Angular 2 QuickStart</title> 
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="app/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.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 type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<!-- 2. Configure SystemJS --> 
<script> 
System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('app/boot') 
     .then(null, console.error.bind(console)); 
    </script> 
</head> 

<!-- 3. Display the application --> 
    <body> 
    <my-app> 
     Loading... 
    </my-app> 
    </body> 
    </html>

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
}, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
}

package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "typings": "typings", 
    "postinstall": "typings install" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "angular2": "2.0.0-beta.7", 
    "bootstrap": "^3.3.6", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "systemjs": "0.19.22", 
    "zone.js": "0.5.15" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.1.0", 
     "typescript": "^1.7.5" 
    } 
    }

Quelle

2016-04-03 aven parker

versuchen mit '.map' Funktion in index.html dh' .map: {rxjs: 'node_modules/rxjs' } ' –

Sorry, ich habe nicht verstanden Du bist Code :) –

Ich meine zu sagen, versuchen Sie '.map: {rxjs: 'node_modules/rxjs'}' Code in Ihre index.html Datei, wo Sie definieren 'System.config'. werfen Sie einen Blick auf diese Antwort http://stackoverflow.com/a/34440018/5043867 –

Ich denke, dass Sie das "von" Operator anstelle des "fromArray" one verwenden:

Observable.from(startDates) 
    .map(date => { 
     (...) 
    });

Quelle

2016-04-03 09:10:47

T Importieren von beobachtbaren Pfad für fromArray-Operator.

importieren 'rxjs/add/beobachtbar/fromArray';

Hier ist ein funktionierendes Beispiel:

import {Observable} from 'rxjs/Observable' 
import 'rxjs/add/operator/map' 
import 'rxjs/add/observable/fromArray' 

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: `` 
}) 
export class AppComponent { 
    constructor() { 
     Observable.fromArray([1, 2, 3]) 
      .map(data => "Value = " + data) 
      .subscribe(x => console.log(x)); 
    } 
}

Quelle

2016-06-28 00:21:02

Angular 2: SyntaxError: Unerwartetes Token <

Antwort

Verwandte Themen