Angular 2 路由返回空白页，没有错误

Question

我正在将 SPA 代码库从 Angular 2.0.0 升级到 2.4.10(Angular 路由器 3.4.10)。但现在，最奇怪的事情发生了:有些路由工作得很好，但有些路由什么也不返回(比如空白组件)，并且我的任何调试前端都绝对没有记录任何错误

这是我们实现的精炼版本:主要的“子”路由是延迟加载的，但以下子路由是由加载的模块急切加载的

示例:

www.hostname.com/clients <- Lazy load
www.hostname.com/clients/details <- Eager loaded by the "Clients" module

我的主应用程序路由 (src/app/app.routing.ts) 上有以下代码:

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: 'clients', loadChildren: () => System.import('../clients/clients.module').then(m => m['ClientsModule']) },
  ...moreRoutes
];

export const appRouting = RouterModule.forRoot(appRoutes);

然后在(src/clients/clients.routing.ts)中:

import { Routes, RouterModule } from '@angular/router';
import { Clients } from './'; // I have a index.ts file that exports the component plus some more stuff, so loading from this relative path works just fine

const clientRoutes: Routes = [
  { path: 'test', component: Clients }, // for testing porpuses
  { path: '', component: Clients }, // "Normal" route that should work like in all my other modules
  ...MoreRoutes
];

export const clientsRouting = RouterModule.forChild(clientRoutes);

然后，clientsRou​​ting const 被导入到 ClientsModule 中，并传递给imports:[] 装饰器。

现在路由 www.hostname.com/clients 仅返回一个空白组件。但路由 www.hostname.com/clients/test 工作正常

现在我完全不知道出了什么问题。我什至比较了两个不同但相似的模块(一个有效，一个无效)，但没有发现显着的编码差异。

项目中的所有组件都是这样实现的，并且在 Angular 2.0.0 上运行良好

编辑:更多信息:

• 我正在使用 webpack 和一些插件来丑化、lint 和其他一些小的调整。在开发中，我们使用 webpack-dev-server (2.9.6) 来监听并重新编译代码，我们的生产和开发配置都有这个问题。由于一些低级依赖关系，如果不先通过 webpack，我就无法运行该应用程序，但我不认为 webpack 是这里的问题，我只是为了以防万一而提及它。
• 当此错误发生时，不会发生重定向，它只是坐在那里，就像什么都没有发生一样。
• 我主要关注的 ATM 是 test 子路由指向与 '' 路由相同的模块，并且它可以工作，而直接 ' ' 一个没有；使用 { enableTracing: true } 跟踪路线在两者之间没有任何区别。

Answer 1

我发现错误:

我在 Clients 模块中导入的模块之一正在导入另一个路由模块，该模块将 '' 路由覆盖到空组件，因此是空白页面。

我是如何找到它的:

使用Augury ，一个用于调试 Angular 应用程序的 Chrome 扩展，我可以看到路由器树正在注册一些不应该注册的东西。当我删除其他模块的路线时，一切都修复了。

我想花点时间感谢所有试图提供帮助的人，以及我在这里得到的提示，这一切都非常有帮助!谢谢!