web-dev-qa-db-ja.com

angular2：キャッチされないSyntaxError：予期しないトークン<

このエラーが発生しますUncaught SyntaxError: Unexpected token < angular2アプリケーションを実行しようとするたびに。これは、angular2 Webサイトの routing 'tutorial' に基づいた変更です。

通常、これらの種類のエラーは、私がコードの一部を誤って書いた場合によくわかります。しかし、Chromeコンソールは error がangular2 jsファイル内で発生することを教えてくれます。

両方の答えを読んで試す Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL および warning C4819: How to find the character that has to be saved in unicode? 動作しませんでした。エラーは私のboot.tsまたは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

あなたにはいくつかの問題があります：

あなたのコンポーネントセレクタは： 'my-app'

<app>Loading...<app>

する必要があります

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

また、間違ったファイルをインポートしています：

System.import('app/app');

する必要があります

System.import('app/boot');

また、TypeScriptをJava script ..にコンパイルしていない限り、この行を変更してTypeScript.jsをインポートする必要があります。

{defaultExtension: 'js'}}

する必要があります

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

また、いくつかのインポートが欠落しています：

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

これが動作するコードの plunker です

5
Abdulrahman Alsoghayer

したがって、上記の答えは正しいようですが、ここにエラー自体に関するいくつかの情報があります（ちょうど何が間違っているのかと疑問に同じ問題に遭遇した他の人のために）それは文字通り各単一インポートで表示されることがある追跡するのは非常に困難です。

ファイルが必要で、ウェブサーバーが/ではなく404-file-not-found-pageのみを提供するように設定されている場合に表示されます。

/は通常/index.htmlに変換され、最初の文字は通常<（主に<!DOCTYPE html>の先頭）です。これは有効なJavaScriptではないため、ブラウザが不正なトークンをスローします例外。

22
Haringat

angular 2ベータリリースをインストールしたと思います。この場合、追加のモジュールをインストールする必要があります：

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

次のスクリプトをインポートします。

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

編集：

実際、これらの変更は alpha 49 で導入されています。

3
Eggy

私の場合、私は持っていました

import {Observable} from 'rxjs/rx';

エラーを出していました。

に変わった

import {Observable} from 'rxjs/Rx';

そして問題は消えました。大文字と小文字の区別に注意してください。

2
imahama

私の場合、エラーは含めることを忘れたことが原因でした

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

index.html

2
Michael Gikaru

インポートするときは、絶対パスを追加してください。また、インポートするファイルの前に同じディレクトリにある./を必ず追加してください。

したがって、file.tsが同じディレクトリにあるservice.tsをインポートする場合は、次のようにインポートを記述します。

import {service} from './service'

あなたが書くなら

import {service} from 'service'

その後、このエラーが発生します

0
Sul Aga

Angular 2クイックスタートで推奨されているrxjs v5.0.0-beta.0パッケージを使用して、ベータ3でこれに遭遇しました。npmパッケージからAngularベータCDNとうまくいきました。

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

これは、SystemJSがライブラリ自体ではなく相対パスからrxjsメソッドをフェッチしようとするためです。

このコード行をSystemjs構成System.config({})内に挿入する必要がありました

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

この解決策を見つけるのに数時間かかった

ソース

0
KhaledMohamedP

Angular 2.0.0-beta.0とrxjsを使用して、今日これに遭遇しました。変更する必要がありました。

import * as Rx from 'rxjs';

に

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