使用rc0启动应用程序

时间:2016-05-03 14:53:34

标签: angular systemjs

我正在使用角度一段时间。 今天我更新到rc1,现在应用程序不再启动了。 我跟着angular.io的快速入门......

这是我的索引:

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/moment/locale/it.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
<script src="bower_components/toastr/toastr.min.js"></script>
<script src="bower_components/spin.js/spin.min.js"></script>
<script src="bower_components/inobounce/inobounce.min.js"></script>
<script src="app/source/utils/extensions.js"></script>

<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
    $.material.init();
    System.import('app').catch(function(err){ console.error(err); });
</script>

这是我的system.config.js:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app/source/', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

这是我的dist文件夹结构:

enter image description here

当我输入我的webapp时,我得到以下错误:

main:52 Error: SyntaxError: Unexpected token <(…)
你能帮帮我吗? 非常感谢

修改 问题似乎与路由器

有关

修改 这是我的组成部分:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {HTTP_PROVIDERS}    from '@angular/http';
import {MainComponent} from './components/sections/main.component';
import {LoginComponent} from './components/sections/login.component';
import {NotFoundComponent} from './components/sections/not-found.component';
import {EventEmitterService} from './services/event-emitter.service';
import {IdentityService} from './services/identity.service';
import {NavigationService, Routes} from './services/navigation.service';
import {SettingsService} from './services/settings.service';
import {ToastsService} from './services/toasts.service';
import {BaseHttpService} from './services/base/base-http.service';
import {LoadingService} from './services/loading.service';
import 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS, EventEmitterService, NavigationService, SettingsService, ToastsService, HTTP_PROVIDERS, BaseHttpService, IdentityService, LoadingService]
})
@RouteConfig([
    {path:Routes.Login.path , name: Routes.Login.state , component: LoginComponent , useAsDefault: true},
    {path:Routes.Main.path , name: Routes.Main.state , component: MainComponent},
    {path:Routes.NotFound.path , name: Routes.NotFound.state , component: NotFoundComponent},
    {path:'/**' , redirectTo: [Routes.NotFound.state]}
])
export class AppComponent implements OnInit, OnDestroy
{
    private unauthorizedSubscription:EventSubscription;

    public constructor (private _identitySvc:IdentityService, private _eventEmitterSvc:EventEmitterService) {
        debugger;
    }

    public ngOnInit ()
    {
        this.unauthorizedSubscription = this._eventEmitterSvc.unauthorizedEvt.subscribe (() => this._identitySvc.logout ());
    }

    public ngOnDestroy ()
    {
        this.unauthorizedSubscription.unsubscribe ();
    }
}

如果我用这样的东西编辑它:

import {Component, OnInit, OnDestroy} from '@angular/core';


@Component({
    selector: 'my-app',
    template: 'hello',
})

export class AppComponent implements OnInit, OnDestroy
{
    private unauthorizedSubscription:EventSubscription;

    public constructor () {
        debugger;
    }
}

它有效

1 个答案:

答案 0 :(得分:0)

我在 app.component.ts

中使用此导入解决了问题
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/finally';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/range';
import 'rxjs/add/operator/delay';

我不知道为什么他们是请求(我真的必须导入每个方法??)。 如果有人发布解释,我会将答案标记为接受者。