2

App is working fine but the Upload child routes are accessible without '/upload' too. For example '/photo', '/advertisement'. This should not be happen. I don't know why this is happening. If anyone know the solution then please reply.

app.routing.ts

{ path: '',   redirectTo: '/dashboard', pathMatch: 'full'},
{path: '', loadChildren: 'app/campsite/campsite.module#CampsiteModule'},
{path: 'login', loadChildren: 'app/login/login.module#LoginModule'}

campsite.routing.ts

path: '', component: CampsiteComponent, children: [
{path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard]},
{path: 'gallery', component: GalleryComponent, canActivate: [AuthGuard]},
{path: 'upload', loadChildren: './upload/upload.module#UploadModule', canActivate: [AuthGuard]}
]

upload.routing.ts

path: '', component: UploadComponent, children: [
{path: 'photo', component: PhotoComponent, canActivate: [AuthGuard]},
{path: 'advertisement', component: AdvertisementComponent, canActivate: [AuthGuard]},
{path: 'video', component: VideoComponent, canActivate: [AuthGuard]},
{path: 'logo', component: LogoComponent, canActivate: [AuthGuard]},
{ path: 'photo', pathMatch: 'full', redirectTo: 'photo' }
]

Lazy Component Upload is loading in App Component Routing too

Garima
  • 1,566
  • 2
  • 11
  • 14

1 Answers1

0

This is a bug: https://github.com/Greentube/localize-router/issues/45. :(

I have the same issue. I think a good path forward - which is not the best, as you will see - is not lazy loading the nested module until this is corrected:

  1. Import UploadModule into CampsiteModule
  2. Declare all your routes in CampsiteModule

...which is very, very ugly and harder to maintain.

There's a note in that link above concerning translations, but I didn't try it. (It also seems like an odd hack.)

For reference, if you look at how webpack generates your modules (from ng serve and such), you'll probably see only campsite.module.chunk.js, not campsite.module.chunk.js alongside upload.module.chunk.js.

Good luck!

Gustave
  • 1
  • Try Angular 4.3.6 before anything else, though. :) – Gustave Aug 30 '17 at 13:08
  • If I follow the above two steps, then it can't be lazy load anymore. It happens same in angular 4.3.6 – Garima Aug 31 '17 at 06:47
  • I see - you're lazy loading the module twice. :) (I needed more coffee, and I switched to decaf, which is clearly not working.) – Gustave Sep 01 '17 at 13:32
  • I did a test of `A` --> `C` and `A` --> `B` --> `C`, and the routes all work (no hard loading; all when the application is in a "warm" state). What's in your `AuthGuard`? Do you have a CoreModule, off hand? I can create a plunker, if I find the time. (Probably sometime tomorrow.) – Gustave Sep 01 '17 at 13:41
  • Auth Guard canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | boolean { if (!this.authService.isLoggedIn()) { this.router.navigate(['/login']); } return this.authService.isLoggedIn(); } – Garima Sep 04 '17 at 05:36
  • Twice where I lazy loading it? – Garima Sep 04 '17 at 05:37