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

Question

我正在将我们的SPA代码库从角度2.0.0升级到2.4.10(Angular router 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来进行uglyfy,lint和其他一些小调整.在in-dev中,我们使用webpack-dev-server(2.9.6)来监听和重新编译代码,我们的配置,生产和开发都有这个问题.由于某些低级别的依赖关系,我不能先运行应用程序而不通过webpack,但我不认为webpack是问题所在,我提到它以防万一.
• 当这个错误发生时,没有重定向发生,它只是坐在那里,就像没有(字面上)发生的那样.
• 我的主要关注test点是,子路由指向与路由相同的模块'',并且它起作用,而直接路由''不起作用; 跟踪路线的方式与{ enableTracing: true }两者之间没有任何差别.

Answer 1

我发现了错误:

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

我怎么找到它:

使用Augury,一个chrome扩展来调试Angular应用程序,我可以看到路由器树是一个不应该注册的东西.当我移除其他模块的路线时,一切都已修复.

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