javascript - angular2: Okänt syntaxfel: Oväntat tecken <

Jag får hela tiden detta fel Uncaught SyntaxError: Unexpected token < varje gång jag försöker köra min angular2-applikation. Detta är bara en modifiering baserad på routing-'handledningen' på angular2-webbplatsen.

Vanligtvis talar den här typen av fel för sig själva där jag skrev fel i en kodbit. Men Chrome-konsolen säger att felet uppstår i en angular2 js-fil.

Att läsa och prova svaren från både Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL och warning C4819: Hur hittar man tecknet som måste sparas i unicode? fungerade inte. Jag antar att felet måste finnas någonstans i min boot.ts eller 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 { }

Svar #1

Så de ovanstående svaren verkar vara korrekta, men här är lite information om själva felet (bara för andra som stöter på samma problem och undrar vad de gjorde fel) eftersom det kan dyka upp med bokstavligen varje enskild import och är ganska svårt att spåra.

Det verkar när en fil krävs och webbservern är konfigurerad att bara leverera / istället för en 404-file-not-found-page.

/ översätts vanligtvis då till /index.html och där är den första tecknet vanligtvis < (oftast början på <!DOCTYPE html>) och eftersom det inte är giltig javascript kastar webbläsaren ett undantag för ogiltig token.

Svar #2

Du har flera problem:

din komponentväljare är: 'my-app'

<app>Loading...<app>

borde vara

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

Dessutom importerar du en fel fil:

System.import('app/app');

borde vara

System.import('app/boot');

Också, om du inte kompilerar din TypeScript till JavaScript.. bör du ändra den här raden och importera typescript.js

{defaultExtension: 'js'}}

borde vara

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

Dessutom saknar du några importeringar:

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

Här är en plunker av din kod som fungerar

Relaterade artiklar