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

【问题标题】：Angular 2 routing returning blank page, no errorsAngular 2路由返回空白页，没有错误
【发布时间】：2018-01-04 17:45:31
【问题描述】：

我正在将我们的 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);

clientsRouting 常量随后被导入 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 } 跟踪路线在两者之间没有任何区别。

【问题讨论】：

Leo 仅供参考，Angular 5 已经发布并支持 LTS :)
感谢您通知我！上次我检查它仍然是一个 RC，我会在我们的下一次重大更新中关注它！
它已经发展壮大并具有许多新功能和安全修复程序。我已经升级了我的 Angular 2 应用程序。它不再是 RC 了 :) 它是一个支持 LTS 的稳定版本

标签： angular angular2-routing lazy-loading upgrade

【解决方案1】：

我发现了错误：

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

我是如何找到它的：

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

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

【讨论】：

我删除了所有 '' 路线，但仍然无法正常工作，您是在说预兆中的无名路线
很久了，不记得是不是八月的无名路线，从那以后我就搬到了Vue。但是，如果我没记错的话，问题是稍后加载的子模块，将主空白'' 路由替换为空模块，解决方案不是删除所有'' 路由，因为您需要其中一个那些加载你的模块，只需删除你不需要的。

【解决方案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 {}

当然，这只是提示您的情况可能出了什么问题，如果不查看整个代码，我无法确定。

【讨论】：

感谢您的提示，不知道这一点，但巧合的是，我所有的路由导入已经是“导入”装饰器中的最后一个，所以情况并非如此。我尝试切换顺序以防万一，结果相同。
如果您尝试将失败的模块之一放在导入的顶部，但它仍然不起作用，我没有更多的线索。您是否查看过浏览器开发工具的“网络”选项卡？查看是否有任何看起来很奇怪（状态或响应内容）。
切换模块顺序没有任何作用，网络选项卡看起来正常，每个 webpack 包都被正确加载。和你一样，我不知道下一步该怎么做：/

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：