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.

Weasel

Leo just FYI, Angular 5 is out and has LTS support :) – Venator

Thanks for notifying me! Last I checked it still was an RC, I'll put it on the radar for our next major update! – Weasel

It has been grown and has many new feature and security fixes. I've already upgraded my Angular 2 app. It is not an RC anymore :) It's a stable version with LTS support – Venator

Answer 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!

Weasel

i removed all the '' routes but still its not working, are you talking about no-named-route in augury – Vatican

It's been a long time, can't remember if it's the no-named-route in augury, I've moved to Vue since then. But if I recall correctly, the problem was a sub-module that was loaded later in time, replacing the main blank '' route to a empty module, the solution is not to remove ALL '' routes, because you need one of those to load your module, just remove the ones that you don't need. – Weasel

Answer 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.

Scabious

Thanks for the tip, didn't know about that, but coincidentally all my routing imports are already the last in the "imports" decorator, so this isn't the case. I tried switching the order around just in case, same results. – Weasel

If you have tried to put one of the failing modules at the top of the imports and it still doesn't work, I don't have much more clues. Have you looked at the 'network' tab of the browser devtool maybe ? To see if any is looking weird (the status, or the content of the response). – Scabious

switching the modules order did nothing, the network tab looks normal, every webpack bundle is being loaded correctly. Just like you, I have no idea what to do next :/ – Weasel

Answer 3

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

Turboelectric

Answer 4

My problem was that I had CSS set to hidden until the router button was clicked. Had to change how the content was set to fade in.

Tobias

Answer 5

This might help someone: I was in the process of moving my website from PHP to Angular and I have experienced the same issue i.e. blank page. The cause of the issue is PHP code in my pages. As soon as the last bit of it was removed, blank page disappeared.

Intercommunion

Answer 6

The fix for me was in tsconfig.json. I made my target es6 instead of esnext and used

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

I also set "allowJS": true and now my intermittent blank screen navigation issue went away, thank God.

Afternoons