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应用程序，我可以看到路由器树是一个不应该注册的东西。当我移除其他模块的路线时，一切都已修复。

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

Answer 2

简而言之（虽然只是一个提示）

由于这个简单的事实，我遇到了类似的问题（也是在升级Angular BTW之后）：Import order matters!在升级依赖项时尝试保持整洁的坏主意。

更多细节

因为我的基本路由模块看起来像

@NgModule({
  imports: [RouterModule.forRoot([{ path: '**',   redirectTo: ''}])],
  exports: [RouterModule]
})
export class AppRoutingModule {}

当我在导入中的其他功能模块之前移动它时，任何请求都会自动重定向到''，并且从不加载任何组件。没有任何错误。

@NgModule({
  imports: [
    AppRoutingModule,  // <= need to move that one at the end
    SomeFeatureModule,
  ],
  // more stuff ...
})
export class AppModule {}

当然，这只是你的情况可能出错的一个暗示，如果不看整个代码，我无法确定。

Answer 3

我的问题是我将CSS设置为隐藏，直到单击路由器按钮。不得不改变内容如何设置为淡入淡出。

Answer 4

这可能对某人有所帮助：我正在将我的网站从PHP迁移到Angular，我遇到了同样的问题，即空白页面。问题的原因是我的页面中的PHP代码。一旦删除它的最后一位，空白页就消失了。