angular2: Uncaught SyntaxError: Unexpected token <

Ich bekomme immer diese Fehler Uncaught SyntaxError: Unexpected token < immer wenn ich versuche zu laufen, meine angular2 Anwendung. Dies ist nur eine änderung auf der Grundlage der routing 'tutorial' der angular2 website.

In der Regel diese Art von Fehlern, die für sich sprechen, wo ich miswrote ein Stück code. Aber der Chrome-Konsole sagt mir, das Fehler tritt innerhalb eines angular2 js-Datei.

Lesen und versuchen, die Antworten aus beiden Chrome nicht Erfasste Syntax Error: Unexpected Token ILLEGAL und C4819 Warnung: Wie finden Sie die Zeichen, die gespeichert werden in unicode? hat nicht funktioniert. Vermute, dass der Fehler irgendwo in meinem boot.ts oder app.Komponente.ts.

boot.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent}     from './app.component';
import {HallService}     from './hall/hall.service';
bootstrap(AppComponent,[
    ROUTER_PROVIDERS,
    HallService
]);

app.Komponente.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HallCenterComponent} from './hall/hall-center.component';

@Component({
    selector: 'my-app',
    template: `
    <h1 class="title">Component Router</h1>
    <a [routerLink]="['HallCenter']">Hallen</a>
    <a>Heroes</a>
    <router-outlet></router-outlet>
  `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {
        path: '/hall/...',
        name: 'HallCenter',
        component: HallCenterComponent,
        useAsDefault: true
    }
])
export class AppComponent { }

index.html

<html>
<head>
    <base href="/">
    <title>Factory project</title>
    <link rel="stylesheet" href="styles.css">
    <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 src="node_modules/angular2/bundles/router.dev.js"></script>
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>

Halle-center.Komponente.ts

import {Component}     from 'angular2/core';
import {RouteConfig, RouterOutlet} from 'angular2/router';
import {HallListComponent}   from './hall-list.component';
import {HallDetailComponent} from './hall-detail.component';
import {HallService}         from './hall.service';

@Component({
    template:  `
    <h2>HALL CENTER</h2>
    <router-outlet></router-outlet>
  `,
    directives: [RouterOutlet],
    providers:  [HallService]
})
@RouteConfig([
    {path:'/',         name: 'HallCenter', component: HallListComponent, useAsDefault: true},
    {path:'/:id',      name: 'HallDetail', component: HallDetailComponent},
    {path:'/list/:id', name: 'HallList',   component: HallListComponent}
])
export class HallCenterComponent { }

was nutzt du als server? Ich bekomme in der Regel diese Art von Fehler, wenn ich die Karte der Routen schlecht auf dem server und es gibt index.html anstelle von javascript
Es gibt bereits mehrere Fragen mit ähnlichen Fehlern. Haben Sie überprüfen Sie stackoverflow.com/...
Zöchbauer ich habe 5 Lösungen so weit, entweder ich hatte Sie ja schon in meinem code, oder es hat nicht geholfen :s

InformationsquelleAutor Edward | 2015-12-30

5

Haben Sie mehrere Probleme:

du component selector ist : 'my-app'
```
<app>Loading...<app>
```
sollte
```
<my-app>Loading...</my-app>
```
Auch, Sie importieren eine falsche Datei:
```
System.import('app/app');
```
sollte
```
System.import('app/boot');
```
Auch, es sei denn, Sie werden kompilieren, Ihr Typoskript für die java-script.. sollte man ändern Sie diese Zeile und importieren typescript.js
```
{defaultExtension: 'js'}}
```
sollte
```
{defaultExtension: 'ts'}}
<script src="https://code.angularjs.org/tools/typescript.js"></script>
```
Auch, Sie fehlen einige Importe:
```
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
```
Hier ist ein plunker von Ihrem code arbeiten
- Ja sorry, die ganze app/my-app falsch war, die ich bearbeitet habe, meine Frage, ich hatte 2 Projekte vermischt, vielen, vielen Dank.
- Ihre plunker scheint zu funktionieren, jedoch wenn ich diese änderungen in meinem Projekt gibt es die "Uncaught RangeError: Maximum call stack size exceeded" wie gesagt, hier goo.gl/O3EVGP. Auch nach dem deaktivieren alle meine Funktionen, die ich denke, ich werde von vorne beginnen, dieses angular2 Zeug ist mir Alpträume..
- Das problem könnte sein, auf eine dieser Dateien 'hall-Liste.die Komponente', './Halle-detail.die Komponente' , './Halle.service'.. könntest du Sie posten?
- plnkr.co/Bearbeiten/pdSToHi7Bi9Fw78kiQV6
- Ich konnte nicht regenerieren Ihr "Maximum call stack" - Problem. Aber hier ist Ihr plunker arbeiten .. ich habe gerade ein paar Importe und entfernt Ihre 2 Kommentare /* implementiert die OnInit - * / << Sie waren, die Probleme verursacht!!
InformationsquelleAutor Abdulrahman
21

So dass die oben genannten Antworten scheinen richtig zu sein, aber hier finden Sie einige Informationen über den Fehler an sich (nur für die anderen, die laufen in das gleiche problem, zu Fragen, was Sie falsch gemacht haben), weil es scheinen kann, buchstäblich mit jede einzelne importieren und ist sehr schwer auf die Spur.

Es wird immer angezeigt, wenn eine Datei benötigt wird und der webserver ist so konfiguriert, dienen nur / statt einer 404-file-not-found-page.

/ in der Regel übersetzt Sie dann in /index.html und es das erste Zeichen in der Regel ist < (meist der Beginn der <!DOCTYPE html>) und da ist kein Gültiger javascript-der browser wirft eine illegale token Ausnahme.
- Diese Antwort ist das, was mir geholfen hat. Er wies mich auf die Tatsache, dass ich einen Rechtschreibfehler in meinem import. Ich hatte aus 'angular2/Router' anstelle von von 'angular2/router'
- Ich wünschte, ich könnte die anderen, wie in dieser Antwort
- Typo für 'rxjs' als 'rxsj' und war immer diese Fehlermeldung. Mich veranlasst, mich neu zu bewerten, meine Importe und fix meine Fragen. Danke!
- Danke! Diese konkret trifft den Kern meines Problems, da bin ich nicht so vertraut mit AppEngine noch!
- Diese Antwort half mir auch. Mit Fiddler habe ich gesehen, dass alle fehlenden Pakete kamen als Blaue Linien und die gleiche Körpergröße.
- Wie können wir eigentlich die Einstellungen ändern, so dass es bietet einen 404 statt index.html?
InformationsquelleAutor Haringat
3

Nehme ich an, das Sie installiert haben eckige 2-beta-release. In diesem Fall müssen Sie zur Installation zusätzliche Module:
```
npm install es6-promise@^3.0.2 es6-shim@^0.33.3 reflect-metadata@0.1.2 rxjs@^5.0.0-beta.0 zone.js@0.5.10 --save
```
Importieren und diese scripts:
```

<script src="../node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system.js"></script>
<script>
  //configure system loader
  System.config({defaultJSExtensions: true});
</script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.min.js"></script>
<script src="../node_modules/angular2/bundles/http.min.js"></script>
<script src="../node_modules/angular2/bundles/router.min.js"></script>
<script>
  //bootstrap the Angular2 application
  System.import('app/app').catch(console.log.bind(console));
</script>
```
EDIT:

In der Tat, diese änderungen eingeführt in alpha-49
- Ich habe gerade 'npm install', so normal es hat alles installiert, richtig? Den node_modules-Ordner ist über 90 MB groß.
- Wenn Sie Winkel-2.0.0-beta.0 diese Pakete müssen separat installiert werden.
- ok, ich werde versuchen, diese, kurze Frage kann ich nur importieren müssen dies in meine index.html oder in jeder 'Klasse' ich bin mit angular2 Zeug?
- Nur in index.html
- Gut, es fixiert die illegal token problem, aber stattdessen bekomme ich die Fehlermeldung "Uncaught RangeError: Maximum call stack size exceeded". Ich nehme an, dies hat nichts zu tun mit den Veränderungen, die ich gerade gemacht aber mit meiner app im Allgemeinen?
- Wahrscheinlich haben Sie irgendwo endlosen rekursiven Funktion.
InformationsquelleAutor Eggy
2

In meinem Fall der Fehler kam aus dem vergessen zu zählen

HTML:
```
<script src="node_modules/angular2/bundles/router.min.js"></script>
```
in index.html

InformationsquelleAutor Michael Gikaru
2

In meinem Fall hatte ich
```
import {Observable} from 'rxjs/rx';
```
welche gab Fehler.

Änderte ich
```
import {Observable} from 'rxjs/Rx';
```
und das problem ging Weg. So erinnert die groß-und Kleinschreibung.
- Ich hatte auch einige Probleme, die manchmal mit verweisen auf das Verzeichnis, zum Beispiel manchmal from './rxjs/Rx'; und manchmal musste es sein from 'rxjs/Rx'; kann mich nicht erinnern, welche eine, wo
InformationsquelleAutor imahama
0

Lief in dieser in der beta 3 mit der rxjs v5.0.0-beta.0-Paket empfohlen, in den Winkel-2 quick start. Ich wechselte von der npm-Paket, die auf den Winkel beta CDN und es funktionierte gut.
```
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
```
InformationsquelleAutor snort
0

Lief in dieser heute mit Winkel-2.0.0-beta.0 und rxjs. Hatte zu ändern
```
import * as Rx from 'rxjs';
```
zu
```
import * as Rx from 'rxjs/Rx';
```
InformationsquelleAutor dchacke
0

stellen Sie sicher, dass Sie vollständigen Pfad beim import. Auch stellen Sie sicher, dass Sie ./vor Dateien, die Sie importieren, die sind im selben Verzeichnis.

Also, wenn Datei.ts will import-service.ts, welche sich im gleichen Verzeichnis ist, dann Sie shoule schreiben Sie den import so:
```
import {service} from './service'
```
wenn Sie schreiben,
```
import {service} from 'service'
```
dann werden Sie diese Fehlermeldung erhalten

InformationsquelleAutor Sul Aga
0

Dies ist aufgrund SystemJS versuchen zu Holen rxjs Methoden aus einem relativen Pfad anstelle der Bibliothek selbst

Musste ich einfügen dieser Codezeile innerhalb der Systemjs Konfiguration System.config({})
```
paths: {
 'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
}
```
Brauchte mehrere Stunden, um zu finden, diese Lösung

Quelle

InformationsquelleAutor KhaledMohamedP

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.