web-dev-qa-db-fra.com

angular2: Uncaught SyntaxError: Jeton inattendu <

Je continue à recevoir cette erreur Uncaught SyntaxError: Unexpected token < chaque fois que j'essaie d'exécuter mon application angular2. Ceci est juste une modification basée sur le tutoriel de routage du site Web angular2. 

Normalement, ce genre d’erreurs parle d’elles-mêmes lorsque j’ai mal écrit un morceau de code. Mais la console Chrome me dit que la erreur se produit dans un fichier angular2 js. 

Lire et essayer les réponses de Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL et warning C4819: How to find the character that has to be saved in unicode? ne fonctionnaient pas. En devinant que l'erreur doit être quelque part dans mes boot.ts ou app.component.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.component.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>

hall-center.component.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 { }
javascripttypescriptsyntax-errortokenangular
7
Edward

Vous avez plusieurs problèmes:

votre sélecteur de composant est: 'my-app'

<app>Loading...<app>

devrait être

<my-app>Loading...</my-app>

De plus, vous importez un mauvais fichier:

System.import('app/app');

devrait être

System.import('app/boot');

De même, à moins que vous ne compiliez votre script TypeScript en Java .., vous devez modifier cette ligne et importer TypeScript.js.

{defaultExtension: 'js'}}

devrait être

{defaultExtension: 'ts'}}
<script src="https://code.angularjs.org/tools/TypeScript.js"></script>

En outre, il vous manque quelques importations:

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

Voici un plunker de votre code qui fonctionne 

5
Abdulrahman

Donc, les réponses ci-dessus semblent correctes, mais voici quelques informations sur l'erreur elle-même (juste pour les autres qui se posent le même problème en se demandant ce qu'ils ont mal fait), car elle peut apparaître littéralement avec chaque importation et est assez difficile pour traquer. 

Il apparaît chaque fois qu'un fichier est requis et que le serveur Web est configuré pour ne servir que / au lieu d'un 404-file-not-found-page. 

/ se traduit généralement par /index.html et le premier caractère est généralement < (généralement le début de <!DOCTYPE html>) et, comme il n’ya pas de javascript valide, le navigateur génère une exception de jeton illégale.

21
Haringat

Je suppose que vous avez installé la version bêta 2 angulaire. Dans ce cas, vous devez installer des modules supplémentaires:

npm install es6-promise@^3.0.2 es6-shim@^0.33.3 [email protected] rxjs@^5.0.0-beta.0 [email protected] --save

Et importer ces scripts:

<!-- ES6-related imports -->
<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>

MODIFIER:

En fait, ces modifications ont été introduites dans alpha 49

3
Eggy

Dans mon cas j'avais

import {Observable} from 'rxjs/rx';

qui donnait erreur.

J'ai changé pour

import {Observable} from 'rxjs/Rx';

et le problème est parti. Alors faites attention à la casse.

2
imahama

Dans mon cas, l'erreur est venue de l'oubli d'inclure

<script src="node_modules/angular2/bundles/router.min.js"></script>

dans index.html

2
Michael Gikaru

assurez-vous d'ajouter le chemin complet lors de l'importation. Assurez-vous également d’ajouter ./ devant les fichiers que vous importez et qui se trouvent dans le même répertoire. 

Donc, si file.ts veut importer service.ts qui se trouve dans le même répertoire, vous devez écrire l'importation comme ceci:

import {service} from './service'

si vous écrivez 

import {service} from 'service'

alors vous obtiendrez cette erreur

0
Sul Aga

J'ai utilisé cette version bêta 3 avec le paquetage rxjs v5.0.0-beta.0 recommandé dans le démarrage rapide Angular 2. Je suis passé du package npm à celui de la version bêta de CDN Angular et cela a bien fonctionné.

<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
0
snort

Ceci est dû au fait que SystemJS a essayé d'extraire des méthodes rxjs d'un chemin relatif au lieu de la bibliothèque elle-même.

J'ai dû insérer cette ligne de code dans la configuration de Systemjs System.config({})

paths: {
 'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
}

Cela m'a pris plusieurs heures pour trouver cette solution

la source

0
KhaledMohamedP

J'ai utilisé cela aujourd'hui avec Angular 2.0.0-beta.0 et rxjs. Dû changer

import * as Rx from 'rxjs';

à

import * as Rx from 'rxjs/Rx';
0
weltschmerz