Angular 7 nested routing with components nested inside modules

Question

I am trying to create a parent-child router using this folder structure approach. First of all, I want to be clear if this folder structure of having components inside modules is fine or should I change anything.

If this looks fine I am having trouble creating nested router which I need to fi. Issue explained below with not working and working example below?

Folder Structure

│   app.component.css
│   app.component.html
│   app.component.ts
│   app.module.ts
│   app.routing.ts
│
├───login
│       login.component.css
│       login.component.html
│       login.component.spec.ts
│       login.component.ts
│
└───user                                        //This is a module
    │   user.module.ts
    │   user.routing.ts
    │
    ├───create-user                             //This is a component
    │       create-user.component.css
    │       create-user.component.html
    │       create-user.component.spec.ts
    │       create-user.component.ts
    │
    ├───list-user                               //This is a component
    │       list-user.component.css
    │       list-user.component.html
    │       list-user.component.spec.ts
    │       list-user.component.ts
    │
    └───view-user                               //This is a component
            view-user.component.css
            view-user.component.html
            view-user.component.spec.ts
            view-user.component.ts

My app.routing has this

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: 'admin',
    component: FullComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

My user.router contains this

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: 'view',
    component: ViewComponent
  },
  {
    path: 'list',
    component: ListComponent
  }
];

Now when I try to accessing the URL http://localhost:4400/login it works perfectly fine

But when I try the same with http://localhost:4400/admin/user/create my route does not work. I need some help with this.

The following approach is working for me fine I want to follow something like above.

Current Procedure.

app.routing

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: '',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

user.routing

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create-user',
    component: CreateComponent
  },
  {
    path: 'view-user',
    component: ViewComponent
  },
  {
    path: 'list-user',
    component: ListComponent
  }
];

The following url works fine http://localhost:4400/login http://localhost:4400/create-user

Your url says users but your route has user please check — Rahul
– Rahul, Commented Jan 16, 2019 at 17:25
@Rahul My bad it is user everywhere. I just recreated the name from py project, have updated the question. — Shahabaz
– Shahabaz, Commented Jan 16, 2019 at 18:55

Rahul · Accepted Answer · 2019-01-17 01:31:03Z

I think the problem is you didn't have your empty path - for in case if you are redirecting to admim route your route will be unmatched because the angular routes will search for an empty route in children routes since you don't have one it will not match the route

Try something like this

  {
    path: 'admin',
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      },
      {
        path:''
        component:FullComponent
      } 
    ]
  }

Now when you try to navigate to admin your FullCompoment will be rendered and if you try /admin/user it will lazy load your user module

Like same way add an empty path to your user-routing-module.ts

{
    path: '',
    redirectTo: 'create',
    pathMatch : 'full'
  }

Most probably this will slove your problem - finally make sure that you have imported your routing in the respective modules - hope this helps - Happy coding :)

elcordova · Accepted Answer · 2019-01-17 18:30:55Z

1

only add hash(#) in app.router export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' });

answered Jan 17, 2019 at 18:30

elcordova

1366 bronze badges

Comments

pedmer · Accepted Answer · 2019-01-16 18:09:23Z

0

Grouping closely-related components in a feature module is the way to go!

What you are trying to do is called module lazy loading. Check the Angular documentation for this topic: https://angular.io/guide/lazy-loading-ngmodules.

You are missing the declaration of a UserRoutingModule inside user.routing.ts (I suggest you rename the file to user-routing.module.ts to follow the convention). Then you just need to import UserRoutingModule in UserModule ;)

By the way, once you are using module lazy loading, you should compile/serve your application with the --aot (ahead-of-time) flag. You can read more about it here: https://angular.io/guide/aot-compiler.

Cheers!

edited Jan 16, 2019 at 18:09

answered Jan 16, 2019 at 17:59

pedmer

363 bronze badges

Comments

Shahabaz · Accepted Answer · 2019-01-17 17:33:01Z

Are you sure you have imported all modules?

You should import RouterModule.forChild(UserRoutes)in UserRoutingModule, then, import UserRoutingModule in UserModule

you should verify the correct url

for example:

const routes: Routes = [
  { path: 'login', component: AppComponent },
  {
    path: 'admin',
    component: AppComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const userRoutes: Routes = [
  { path: 'create', component: CreateUserComponent },
  { path: 'list', component: ListUserComponent },
];

@NgModule({
  imports: [RouterModule.forChild(userRoutes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Collectives™ on Stack Overflow

Angular 7 nested routing with components nested inside modules

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related