Question

我正在将SPA代码库从angular 2.0.0升级到2.4.10（Angular router 3.4.10）。但现在，最奇怪的事情正在发生：一些路由工作正常，但有些路由没有返回任何内容（如空白组件），并且在我的任何调试前端都记录了绝对没有错误

这是我们实施的提炼版本：主要＆＃34; sub＆＃34;路由是延迟加载的，但是后续的子路由是由加载的模块

急切加载的

示例：

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：[] decorator。

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

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

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

编辑：更多信息：

我使用webpack和一些插件来进行丑陋，lint和其他一些小调整。在in-dev中，我们使用webpack-dev-server（2.9.6）来监听和重新编译代码，我们的配置，生产和开发都有这个问题。由于某些低级别的依赖性，我无法首先通过webpack运行应用程序，但我不认为webpack是问题，我提到它以防万一。
当这个错误发生时，没有重定向发生，它只是坐在那里，就像没有（字面意思）发生一样。
我的主要关注点是test子路由指向与''路由相同的模块，它可以正常工作，而直接''子路由不会;用{ enableTracing: true }追踪路线在两者之间没有任何差别。

Answer 1

我发现了错误：

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

我是如何找到的：

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

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

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代码。一旦删除了它的最后一点，空白页就消失了。

Answer 5

就我而言，index.html中基本元素的href错误。已将其更正为<base href="/">，并且可以正常工作。

Answer 6

对我来说，解决方法是在tsconfig.json中。我将目标设为es6而不是esnext并使用

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

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

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

6 个答案:

简而言之（只是提示）

更多详情