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

Question

我正在将我们的 SPA 代码库从 angular 2.0.0 升级到 2.4.10（Angular 路由器 3.4.10）。但是现在，最奇怪的事情发生了：一些路由工作得很好，但是一些路由 return 什么都没有（就像一个空白组件）并且在我的任何调试前端都没有记录任何错误

这是我们实现的提炼版本：主要 "sub" 路由是延迟加载的，但以下子路由是由已加载模块急切加载的

示例：

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);

然后将 clientsRouting const 导入 ClientsModule 并传递给 imports:[] 装饰器。

现在路线 www.hostname.com/clients return 只是一个空白组件。但是路线www.hostname.com/clients/test正常

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

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

上运行良好

编辑：更多信息：

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

Answer 1

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

由于这个简单的事实，我遇到了类似的问题（也是在升级 Angular 顺便说一句之后）：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 2

我发现错误：

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

我是怎么找到它的：

使用 Augury 调试 Angular 应用程序的 chrome 扩展，我可以看到路由器树正在注册它不应该注册的内容。当我删除另一个模块的路由时，一切都已修复。

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

Answer 3

我的问题是我将 CSS 设置为隐藏，直到单击路由器按钮。必须更改内容淡入的设置方式。

Answer 4

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

Answer 5

在我的例子中，index.html 中基本元素的 href 不正确。将其更正为 <base href="/"> 并且有效。

Answer 6

我的修复在 tsconfig.json 中。我将目标设为 es6 而不是 esnext 并使用了

"lib": [
  "es2019",
  "dom"
],

我还设置了 "allowJS": true，现在间歇性黑屏导航问题消失了，感谢上帝。

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

Angular 2 routing returning blank page, no errors

lazy-loading

upgrade

angular2-routing

angular

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

更多详情