const appRoutes: Routes  = [
    { path: 'comp1',component: Comp1Component},{ path: 'comp2',component: Comp2Component},{ path: 'comp3',loadChildren: 'app/comp3/comp3.module'}
];

export default RouterModule.forRoot(appRoutes);

我将第三个组件的代码转换为模块,并将所有从应用程序导入到第三个组件.该模块的路由配置如下：

const routes: Routes = [
    {path: '',component:Comp3Component}
];

export default RouterModule.forChild(routes);

当我运行应用程序时,Comp1和Comp2的路由工作正常,当我单击Comp3的链接(模块路由)时,我得到以下错误记录到控制台：

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'.
Error: Cannot find module './comp3/comp3.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular]

似乎webpack没有处理延迟加载.我已尝试过“loadChildren”调用的各种路径变体,包括：

loadChildren: 'app/comp3/comp3.module#Comp3Module'

没有改变行为(仍然得到上面的错误). angular2的新功能可能是我的代码中的内容,但我看到其他人得到了相同的错误.我的google / stackoverflow foo并未引导我找到解决方案.
我加了我的sample app to my Github account here.

I saw this issue logged by another developer with the Angular team but they kicked it as a support issue to StackOverflow because the sample worked on plunkr.我确定那里有一个线索,但是我对webpack并不是很了解,以及它是如何找到应用程序的plunkr与ng服务运行中的差异所做的.

添加其他信息.该应用程序的html模板如下所示：(also available on github repo)：

<h1>
    {{title}}
 </h1>
 <ul>
    <li><arouterLink="/comp1" routerLinkActive="active">Component 1</a></li>
    <li><arouterLink="/comp2" routerLinkActive="active">Component 2</a></li>
    <li><arouterLink="/comp3" routerLinkActive="active">Component 3</a></li>
  </ul>
  <p></p>
  <router-outlet></router-outlet>

我复制了这个应用程序的源代码树(从src / app下来)到angular2 seed project,并且有一些小的预期tweek,它在那里运行良好,并且在angular-cli设置的环境中继续失败.我对TS源的唯一更改是使用相对路径：

{ path: 'comp3',loadChildren: './comp3/comp3.module#Comp3Module'}

用于loadChildren调用.我更改了我的Github示例代码以反映此更新,但它仍然在angular-cli环境下失败.

export default RouterModule.forChild(routes);

至：

export const comp3Routing = RouterModule.forChild(routes);

在你的comp3.module.ts替换：

import comp3Routes from "./comp3.routes";

至：

import { comp3Routing } from "./comp3.routes";

最后导入comp3Routing,所以看起来应该是这样的：

@NgModule({
    imports: [
        CommonModule,RouterModule,comp3Routing,],declarations: [
        Comp3Component
    ],exports: [
        Comp3Component
    ],providers: [],})
export class Comp3Module { }

你的comp3的延迟加载应该工作.

这是我的懒加载路线：

{
    path: 'venue/:name/:id',loadChildren: () => System.import('../containers/activity-detail/activity-detail.module').then((file: any) => {
        return file.default;
    })
},

我想路由到这个’activity-detail.module’,然后使用“：name”和“id：”参数加载详细信息.

加载的模块有自己的路由文件.

export const VenueDetailRoutes: Route[] = [
    {
        path: '',redirectTo: 'venue/:name/:id',pathMatch: 'full'
    },{
        path: 'venue/:name/:id',component: VenueDetailComponent,data: {
            shouldDetach: true,// Route will be resused. See CustomresuseStrategy.
            title: null
        }
    },{
        path: '**',redirectTo: '/'
    }

];

似乎没有第一个默认对象没有任何作用.我收到错误：

{
    path: '',pathMatch: 'full'
},TypeError: Cannot read property 'path' of null

使用默认对象我得到错误：

Error: Cannot redirect to 'venue/:name/:id'. Cannot find ':name'.

任何帮助将不胜感激.

{
    path: '',

它无法匹配带参数的路径的“空”路径.

延迟加载路由的语法比我的复杂得多.我看起来像这样：

{
    path: 'movies',loadChildren: './movies/movie.module#MovieModule'
},

请注意,“父”路由(此示例中为“电影”)在延迟加载的路由中定义,并且不会在加载的模块路由中重复.

例如：

RouterModule.forChild([
  { path: '',component: MovieListComponent },{ path: 'search',component: MovieSearchComponent },{ path: ':id',component: MovieDetailComponent }
])

在你的情况下,我认为加载模块的路由应该如下所示：

export const VenueDetailRoutes: Route[] = [
    {  
       path: ':name/:id',// Route will be resused. See CustomresuseStrategy.
            title: null
        }
    }    
];

(尽管您可能需要考虑在基本路由工作之前不要使用自定义重用策略.)

问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现……所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.

这是我的路由器配置(主模块)：

export const MODULE_ROUTES: Route[] =[
    { path: '',redirectTo: 'dashboard',pathMatch: 'full' },{ path: 'dashboard',component: HomeComponent,canActivate: [AuthGuard] },{ path: 'calendar',loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},{ path: '**',component: nopageFoundComponent,pathMatch: 'full' }
]
.
.
.


@NgModule({
    imports: [
        RouterModule.forChild(MODULE_ROUTES)
.
.
.

在我的懒惰模块上：

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',component: CalendarComponent,canActivateChild: [AuthGuard,CalendarGuard],children: [
            {
                path: '',component: MainCalendarComponent,CalendarGuard]
            },{

                path: 'user',component: EditEventComponent,CalendarGuard]
            }
        ]
    }
]

.
.
.

@NgModule({
    imports: [
        SharedModule,.
.
.
        RouterModule.forChild(MODULE_CALENDAR_ROUTES)

如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示：

Routes:  [
  {
    "path": "dashboard","canActivate": [
      null
    ]
  },{
    "path": "calendar","loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",{
    "path": "**","pathMatch": "full"
  },{
    "path": "dashboard"
  }
]

你能帮助我吗？

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',CalendarGuard]
            }
        ]
    }
]

CalendarComponent的路径必须从以下更改：

path: 'calendar',// wrong
component: CalendarComponent,...

到下面：

path: '',// right
component: CalendarComponent,...

感谢@jotatoledo on gitter帮助我解决这个问题.

就像在视频中播放视频并将路径出口视为该视频的兄弟一样,此页面更改是否会触发视频重新加载？

如果是这样,可以预防吗？

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'settings'

这是我的app.modules.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routeComponents,routing,appRoutingProviders } from './app.routes';


@NgModule({
    declarations: [
        AppComponent,routeComponents
    ],imports: [
        browserModule,CommonModule,FormsModule,routing
    ],providers: [ appRoutingProviders ],entryComponents: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule {

}

这是我的app.routes.ts

import { Routes,RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/';
import { settingsRoutes,settingsComponents } from './settings/';

const appRoutes: Routes = [
    { path: '',redirectTo: 'dashboard',pathMatch: 'full'},{ path: 'dashboard',component: DashboardComponent },...settingsRoutes
];

export const appRoutingProviders: any[] = [

];

export const routeComponents: any[] = [
    DashboardComponent,...settingsComponents
];

export const routing = RouterModule.forRoot(appRoutes,{useHash: true});

这是我的settings.routes.ts

import { Routes } from '@angular/router';
import { SettingsComponent } from "./settings.component";
import { DashboardSettingsComponent } from "./dashboard-settings/dashboard-settings.component";

export const settingsRoutes: Routes = [
    {
        path: 'settings',component: SettingsComponent,children: [
            { path: 'dashboard-settings',component: DashboardSettingsComponent }
        ]
    }
];

export const travelSettingsComponents = [
    SettingsComponent,DashboardSettingsComponent
];

**如果我从settings.routes.ts文件中删除此行,则没有错误,它允许我转到设置路径：

{ path: 'dashboard-settings',component: DashboardSettingsComponent }

children: [
    { path: '',component: SettingsComponent },{ path: 'dashboard-settings',component: DashboardSettingsComponent }
]

这将生成以下URL：/ settings和/ settings / dashboard-settings

我的索引文件,

<!--... . .  varIoUs scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

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

应用来源,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp,[ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app',template :  `
        go to this <a href="javascript:void()"data="/link">link</a>
        <br />
        <router-outlet></router-outlet>

    `,directives: [ROUTER_DIRECTIVES],providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/link',name: 'Link',component: RouteComponent}
])
export class RoutingApp{

}

和RouteComponent

import {Component} from 'angular2/core'

@Component({
    template: `
        hello from RouteComponent
    `
})
export class RouteComponent{}

我做错了什么？ Angular版本是2.0.0-beta.7.

谢谢您的任何见解.

<a [routerLink]="['Link']">link</a>

由于您已将ROUTER_DIRECTIVES指定到组件的directives属性中,因此该指令可直接使用

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',component: parentComponent,canActivate: [AuthGuard],resolve: {
            someData: someDataResolver
        },children: [
            { path: '',redirectTo: '0',pathMatch: 'full' },{ path: '0',component: someComponent1,resolve: {
                    someData1: someData1Resolver,someData2: someData2Resolver,}
            },{ path: '2',component: someComponent2,resolve: {
                    someData2: someData2Resolver
                }
            }
            ... a bunch more children routes/components with resolvers

        ]
    }]

现在,我正在重复每个儿童路线的解析器呼叫,我认为这不是最佳的.有谁知道是否有更好的方法来共享共享兄弟儿童解析器的数据？我考虑将数据从重复的解析器设置为共享服务,然后另一个子兄弟路由将从服务访问数据(而不是在解析器中进行另一个api调用).还有其他更优化的解决方案吗？

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',resolve: {
                    someData2: someData2Resolver
                },children: [
                { path: '',resolve: {
                        someData1: someData1Resolver,}
                },}
                ... a bunch more children routes/components with resolvers
            ]
        ]
    }]

<main>
  <div>
    <div>
      <router-outlet></router-outlet>
    </div>
    <div>
      <router-outlet name="aside"></router-outlet>
    </div>
  </div>
</main>

我想在主路由器插座中加载一些组件,在辅助路由器插座中加载一些其他组件用于相同的路由(当然,我有几条路由).因此,我定义了这样的路线：

export const AppRoutes: Routes = [
  {
    path: "",component: HomeSummaryComponent
  },{
    path: "",component: AskSummaryComponent,outlet: "aside"
  },{
    path: "payments",component: PaymentComponent
  },component: DataSummaryComponent,outlet: "aside"
  }
];

当页面加载时,它运行良好,我在主路由器插座中有HomeSummaryComponent,在旁边路由器插座中有AskSummaryComponent.但是,在导航中,我有这个：

<a routerLink="/payments">Payments</a></span>

当我点击此链接时,主路由器插座的内容将由PaymentComponent替换,但旁边的路由器插座仍会显示AskSummaryComponent.

我还试图通过“/ payements-aside”重命名第二个“付款”路线,并将链接替换为：

<a routerLink="/payments(aside:payments-aside)">Payments</a>

但它仍然无效.但是,当我直接访问http：// localhost：8083 / payments(除了：付款旁),它确实有效,但这个URL并不是真正干净…它不能用于面向公众的网站,因为.

有没有人知道如何实现这个简单的需求？

{
       path: 'customers',canActivate: [AuthGuard],children: [
       {
          path: '',component: CustomersComponent,outlet: 'main'
       },{
          path: '',component: SideBarComponent,outlet: 'sideBar'
       }
     ]
    }

模板：’< router-outlet>< / router-outlet>< router-outlet name =“popup”>< / router-outlet>‘

我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局组件,以便我可以在所有页面上重复使用它,并使用loadChildren加载相应的模块和组件.

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div>
  <router-outlet></router-outlet>
</div>

问题是当我将弹出插座的routerLinks移动到菜单中时,它包含主路径的尾部斜杠,结果url不起作用.所以例如这个routerLink：

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

创建url’localhost / mainroute(popup：login)'(如果它放在app组件中)和’localhost / mainroute /(popup：login)'(如果它放在菜单组件中).

当第一个网址有效时,第二个网址会产生错误：
错误：无法匹配任何路线：’mainroute’

我不明白为什么它以不同的方式处理这两种情况.我也不明白,即使url’localhost / mainroute /’工作,第二个生成的url也不会因为斜杠.

有人能帮我吗？

建议的解决方案是使用这样的相对链接：

<a [routerLink]="['../',{ outlets: { popup: 'login' } }]">

或使用这样的绝对链接：

<a [routerLink]="['/',{ outlets: { popup: 'login' } }]">

在这里描述的情况下,绝对链接工作并给出了正确的链接.

我仍然不明白这种行为.所以,如果有人有一个很好的解释,请详细说明.

我有一个父组件,将在该页面上的路由器插座中显示子路由组件.

单击时,有2个按钮将使用子组件填充路由器插座.如何将内容放置在路由器插座内部,例如. “单击选项以显示数据”,然后单击该按钮后此消息将清除,子组件将显示在路由器插座中？

<div>
    <div>
        <divrouterLink="/unpaid/people">
            View People
        </div>
        <divrouterLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

编辑
这是我的路线

path: 'unpaid',component: UnpaidBillsComponent,children: [
      {path: 'people',component: UnpaidPeopleComponent},{path: 'bills',component: UnpaidBillListComponent}
    ]

default text inside the router-outlet until it is populated

首先,你的假设是错误的,内容不是插在插座内,而是插在插座下面.

您无法在模板中设置默认内容,但可以设置包含默认内容的默认路由.只需使用路径：”并使用带有“默认”模板的组件.

使用您需要的“默认”模板创建组件：

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

并将其添加到您的路线.

children: [
  {path: '',component: DefaultTemplateComponent},{path: 'people',component: UnpaidBillListComponent},]

http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview

onSelect(crisis: Crisis) {
    // Navigate with Absolute link
    //this.router.navigate(['/crisis-center',1]); //this is working.
     this.router.navigate(['/crisis-center',{ id: '1',id2:'2'}]); //this is not working
    }

//下面是路线：

//{ path: 'crisis-center/:id',component: CrisisDetailComponent } //-- this is working
  { path: 'crisis-center/:id /:id2',component: CrisisDetailComponent},// this is not working

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        let id = +params['id'];
        let id2 = +params['id2']; //Unable to read id and id2 values
        this.service.getCrisis(id)
          .then(crisis => {
            if (crisis) {
              this.editName = crisis.name;
              this.crisis = crisis;
            } else { // id not found
              this.gotoCrises();
            }
          });
      });
  }

我有三个分层导航,它从危机中心转移到危机细节,然后从危机细节转移到> transactiondetail.因此,在我导航到危机细节之后,我想通过危机等待和危机等待,以便遍历细节,然后再回到危机清单.

我试图传递多个参数在这里有人有这个问题？

此外,我想隐藏浏览器URL中的URL参数并显示别名,以前用作“as”关键字现在它不起作用.

任何帮助赞赏

this.router.navigate(['/crisis-center',1,2]);

你试图这样做：

this.router.navigate(['/crisis-center',id2:'2'}]); //this is not working

因为您已将对象作为第二个参数传递,所以您传递的是查询参数而不是路由器参数.所以,它的URL是：

localhost:3000/crisis-center;id=1&id2=2

你可以在这里阅读更多相关信息：https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

我的索引文件,

<!--... . .  varIoUs scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

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

应用来源,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp,[ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app',template :  `
        go to this <a href="javascript:void()"data="/link">link</a>
        <br />
        <router-outlet></router-outlet>

    `,directives: [ROUTER_DIRECTIVES],providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/link',name: 'Link',component: RouteComponent}
])
export class RoutingApp{

}

和RouteComponent

import {Component} from 'angular2/core'

@Component({
    template: `
        hello from RouteComponent
    `
})
export class RouteComponent{}

我做错了什么？ Angular版本是2.0.0-beta.7.

谢谢您的任何见解.

<a [routerLink]="['Link']">link</a>

由于您已将ROUTER_DIRECTIVES指定到组件的directives属性中,因此该指令可直接使用

目前,在foo页面(www.app.com/foo/1)上,用户可以单击一个按钮,它将打开一个mddialog组件,栏.

我想要做的是,在打开mddialog时,它会将/ bar /：id附加到组件.因此,例如它将类似于www.app.com/foo/1/bar/1.目标是让用户拥有可以导致foo的可共享链接,然后打开mddialog.

到目前为止,这就是我的应用程序的结构.

app/
  app.component.html <- <router-outlet> is found here
  app.component.ts
  app.module.ts

  foo/
    foo-routing.module.ts
    foo.component.html
    foo.component.ts
    foo.module.ts

    bar/
      bar.component.html <- This bar component file for the mddialog
      bar.component.ts

  baz/ <- Another section of the website with it's own routing
    baz-routing.module.ts
    baz.component.html
    baz.component.ts
    baz.module.ts
    ...

目前在我的foo-routing.module.ts中,我有这个：

const routes: Routes = [
  {
    path: 'foo/:fooId',component: FooComponent,children: [
      {
        path: 'bar/:barId',component: BarDialogComponent
      }
    ]
  }
];

但是,这不起作用.所有这一切都是打开模块,重新路由到/,并且不允许我点击其他链接.

有人有什么建议或想法吗？谢谢！

bar.component.ts

constructor(
  public dialog: MatDialog,@Inject(DOCUMENT) private doc: any,private router: Router) {
  dialog.afterOpen.subscribe(() => {
    if (!doc.body.classList.contains('no-scroll')) {
      doc.body.classList.add('no-scroll');
    }
  });

  this.openModal();
}

openModal() {
  this.dialogRef = this.dialog.open(JazzDialog,this.config);

    this.dialogRef.afterClosed().subscribe((result: string) => {
    this.dialogRef = null;
    this.router.navigate(['../']);
    this.doc.body.classList.remove('no-scroll');
  });
}

Plunker Example

所以,我有一个表格对话框.如果用户单击提交按钮,则验证表单.如果输入有效,则关闭对话框并提交表单.但是,如果输入无效,则对话框将保持打开状态并显示错误消息.为此,我想使用[mat-dialog-close],因为它在official documentation中描述,其使用如下：

<button mat-button [mat-dialog-close]="true">Yes</button>

我以为我可以传递一个布尔值,标签是否有效取决于变量的布尔值.但是,这不起作用.我试过这样的：

<button type="submit" (click)="addUser()" [mat-dialog-close]="formisvalid" mat-button>Submit</button>

我传递了变量formisvalid.除非输入无效,否则它的值为true.但是现在对话框始终关闭,无论formisvalid的值如何.
我也尝试用假替换它.我认为无论发生什么事情,对话框都会保持打开状态,但它也会一直关闭.

所以,我的问题是：我是否错误地使用了[mat-dialog-close],或者我只是做错了什么？如果使用[mat-dialog-close]指令无法实现这一点,那么实现我想要做的事情的另一种方法是什么？

<button type="submit" (click)="addUser()" mat-dialog-close [disabled]="formisvalid" mat-button>Submit</button>

constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
) { }

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const injector = Injector.create({
  providers: [{ provide: ''extraProvider'', useValue: ''dada'' }],
  parent: this.injector
});
const componentRef = componentFactory.create(this.injector);

this.applicationRef.attachView(componentRef.hostView);
this.container.insert(componentRef.hostView, 0);

document.body.appendChild((componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement);

const context = {};
const viewRef = this.templateRef.createEmbeddedView(context);

<ng-template #template let-age="age" >
  {{ value }} and {{ age }}
</ng-template>

但是,如果我直接浏览到应用程序中的子路径,例如：
http://cafeserver.azurewebsites.net/Web/customers

它将抛出一个错误,指出“您没有权限查看此目录或页面.”

我该如何解决这个问题？

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

请注意,我的设置免除了对包含/ api的文件,目录和请求URI的请求,因为我为后端HTTP路由保留了这个.您可以根据您的豁免需求更新您的.

Chrome 57.0.2987 (Linux 0.0.0) ERROR
  Uncaught Response with status: 0  for URL: null
  at webpack:///~/rxjs/Subscriber.js:238:0 <- src/test.ts:737
PhantomJS 2.1.1 (Linux 0.0.0): Executed 31 of 31 ERROR (1.258 secs / 1.352 secs)

我在测试组件时遇到了这个问题.模拟HTTP请求解决了问题.为了做到这一点,我推荐这篇关于testing HTTP services的tratra文章.