Javascript 使用事件发射器时无法运行Angular 2应用程序_Javascript_Angularjs_Angular_Rxjs

Javascript 使用事件发射器时无法运行Angular 2应用程序

javascript angularjs angular rxjs

Javascript 使用事件发射器时无法运行Angular 2应用程序,javascript,angularjs,angular,rxjs,Javascript,Angularjs,Angular,Rxjs,我遇到了一个问题，在添加使用事件发射器的服务后，我的应用程序将不再加载。我得到的错误如下： "SyntaxError: expected expression, got '<' Evaluating http://localhost:3000/node_modules/angular2/ts/src/facade/async Error loading http://localhost:3000/app/main.js" angular2-polyfills.js:138:14 Synt

我遇到了一个问题，在添加使用事件发射器的服务后，我的应用程序将不再加载。我得到的错误如下：

"SyntaxError: expected expression, got '<'
Evaluating http://localhost:3000/node_modules/angular2/ts/src/facade/async
Error loading http://localhost:3000/app/main.js" angular2-polyfills.js:138:14

SyntaxError: expected expression, got '<'

我使用事件发射器的服务如下所示：

import {bootstrap} from "angular2/platform/browser"
import {provide} from "angular2/core";
import {ROUTER_PROVIDERS} from "angular2/router"

import {AppComponent} from "./app.component"
import {LocalStorageService} from "./core/localstorage.service";
import {PersistenceService} from "./core/persistence.service";

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    LocalStorageService,
    provide(PersistenceService, {useExisting: LocalStorageService})
]);

import {Injectable, Output} from "angular2/core";
import {EventEmitter} from "../../node_modules/angular2/ts/src/facade/async";

@Injectable()
export class GlobalActionsService {
    @Output() saveSettings: EventEmitter<any> = new EventEmitter();
    @Output() loadSettings: EventEmitter<any> = new EventEmitter();

    doSave() {
        this.saveSettings.emit(null);
    }

    doLoad() {
        this.loadSettings.emit(null);
    }

}

<html>
    <head>
        <!-- Set the base href for routing -->
        <base href="/">

        <title>MyApp</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 1. Load stylesheets -->
        <link rel="stylesheet" type="text/css" href="./public/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./public/css/custom.css">

        <!-- 2. Load libraries -->
        <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>

        <!-- 3. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/main').then(null, console.error.bind(console));
        </script>
    </head>

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

从“angular2/core”导入{Injectable，Output}；
从“./../node_modules/angular2/ts/src/facade/async”导入{EventEmitter}”；
@可注射（）
导出类GlobalActionsService{
@Output（）保存设置：EventEmitter=neweventemitter（）；
@Output（）加载设置：EventEmitter=neweventemitter（）；
多萨夫（）{
此.saveSettings.emit为空；
}
多洛德（）{
this.loadSettings.emit（null）；
}
}

最后，我的index.html如下所示：

import {bootstrap} from "angular2/platform/browser"
import {provide} from "angular2/core";
import {ROUTER_PROVIDERS} from "angular2/router"

import {AppComponent} from "./app.component"
import {LocalStorageService} from "./core/localstorage.service";
import {PersistenceService} from "./core/persistence.service";

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    LocalStorageService,
    provide(PersistenceService, {useExisting: LocalStorageService})
]);

import {Injectable, Output} from "angular2/core";
import {EventEmitter} from "../../node_modules/angular2/ts/src/facade/async";

@Injectable()
export class GlobalActionsService {
    @Output() saveSettings: EventEmitter<any> = new EventEmitter();
    @Output() loadSettings: EventEmitter<any> = new EventEmitter();

    doSave() {
        this.saveSettings.emit(null);
    }

    doLoad() {
        this.loadSettings.emit(null);
    }

}

<html>
    <head>
        <!-- Set the base href for routing -->
        <base href="/">

        <title>MyApp</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 1. Load stylesheets -->
        <link rel="stylesheet" type="text/css" href="./public/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./public/css/custom.css">

        <!-- 2. Load libraries -->
        <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>

        <!-- 3. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/main').then(null, console.error.bind(console));
        </script>
    </head>

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


MyApp
System.config({
套餐：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'app/main'）。然后（null，console.error.bind（console））；
加载。。。

我不确定我的问题是否与我如何引导应用程序、我对事件发射器的使用或其他完全相关……如果有人能解释一下这里可能存在的问题，我将不胜感激

您需要以这种方式导入

EventEmitter

（从Angular2的核心模块导入）：