Angular 2 routing returning blank page, no errors

Question

I'm in the process of upgrading our SPA code base from angular 2.0.0 to 2.4.10 (Angular router 3.4.10). But now, the weirdest thing is happening: some routes work just fine, but some routes return nothing (like a blank component) and absolutely NO ERRORS are logged on any of my debugging fronts

Here's the distilled version of our implementation: The main "sub" routes are lazy loaded, but following child routes are Eagerly loaded by the loaded module

Example:

www.hostname.com/clients <- Lazy load
www.hostname.com/clients/details <- Eager loaded by the "Clients" module

I have the following code on my main app route (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);

And then in the (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);

the clientsRouting const is then imported in the ClientsModule and passed to the imports:[] decorator.

Now the route www.hostname.com/clients returns just a blank component. But the route www.hostname.com/clients/test works normally

Now I have absolutely no idea of what's wrong. I even compared two distinct but similar modules (one that work and one that doesn't) but found no significant coding differences.

All the components in the project are implemented like this and work fine on Angular 2.0.0

Edit: some more info:

• I'm using webpack with some plugins to uglyfy, lint and some other minor tweaks. while in-dev, we use the webpack-dev-server (2.9.6) to listen for and recompile the code, both our configs, for production and development have this issue. I can't run the app without it passing trough webpack first due to some low-level dependencies, but I don't think webpack is the issue here, I'm mentioning it just in case.
• No redirects happen when this bug occurs, it just sits there, like nothing (literally) happened.
• My main focus ATM is that the test sub-route points to the same module as the '' route, and it works, while the direct '' one doesn't; Tracing the route with { enableTracing: true } wields no diference whatsoever between the two.

Solution 1

I found the error:

One of the modules I was importing inside the Clients module was importing another routing module that overwritten the '' route to an empty component, hence the blank page.

How I found it:

Using Augury, a chrome extension to debug Angular apps, I could see that the router-tree was registring something it shouldn't. The moment I removed the other module's route, everything was fixed.

I'd like to take a moment and thank everyone that tried to help and for the tips I got here, it was all very helpfull! Thank you!

Solution 2

In short (just a hint though)

I've faced a similar problem (also after upgrading Angular BTW), due to this simple fact: Import order matters! Bad idea to try to be tidy while upgrading dependencies.

More details

Because my base routing module looks something like

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

When I moved it before the other feature modules in the imports, any request was automatically redirecting to '', and never loaded any of the component. Without any error.

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

Of course this is just a hint of what could have gone wrong in your case, I can't tell for sure without looking at the whole code.

Solution 3

In my case, the href of the base element in index.html was incorrect. Corrected it to <base href="/"> and it worked.