1

I have implemented lazy loading in my app and since then, the root route is not working. I have read some posts and apparently it doesn't work in Angular 7 with lazy loading, I should redirect from "" to "whatever". The point is that it doesn't do the redirection, so my HomeComponent is never rendered. I have tried redirecting from other routes to the root route and it does the redirection, but it still doesn't render anything. Antoher thing I have tried is to render my HomeComponent in another path, like "home", but I need something happening in the root route, either a redirection or a rendering. Here is my code, thanks in advance!

PS: The rest of the routes are working perfectly, is just this one I can't make it work. If I try to render any other module from my app it does the same (nothing) and those modules are working in other routes.

app-routing.module.ts

...
const routes: Routes = [
    // Home
    { path: '', redirectTo: 'home', pathMatch: 'full' }, // Doesn't redirect
    { path: 'home', loadChildren: './views/home/home.module#HomeModule' },
     ... // But it renders when you type the route in the browser
    ]

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomeRoutingModule
  ]
})
export class HomeModule { }

home-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
    {path: '', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }
Gonzalo
  • 168
  • 1
  • 1
  • 7

1 Answers1

1

Remove exports: [RouterModule] from your HomeRoutingModule. you dont need export the router module in forChild routes modules. Only if you have a sub module with your forRoot routes. and you need import that module in your appModule (main module).

Manuel Panizzo
  • 876
  • 3
  • 8
  • Thanks! That didn't solve my problem, but I could get it with this approach: 1- I removed the root route from _app-routing.module.ts_. 2- In _app.component.html_ I have included my ``, and I render it conditionally with a `*ngIf="render"`. 3- In _home.component.ts_ there is a listener for changes in the URL and set the render variable to `true` if `window.location.pathname === '/'` I know it's not the best approach, but it works. – Gonzalo Nov 13 '19 at 11:47