Routing & Modules

Question

I have the following routing configuration in my app:

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRouting,

    // Feature Modules
    CoreModule,
    AuthModule,
    AdminModule,
    SharedModule
  ],
  bootstrap: [AppComponent]
})

app.routing.ts

const routes: Routes = [
  { path: '', redirectTo: 'admin', pathMatch: 'full' },
  { path: 'admin', loadChildren: () => AdminModule }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
  ],
  exports: [RouterModule]
})

admin.module.ts

@NgModule({
  declarations: [
    AdminComponent
  ],

  imports: [
    CommonModule,
    FormsModule,
    UserModule,

    AdminRouting,
    SharedModule
  ],

  providers: [
    UserService
  ]
})

admin.routing.ts

const routes: Routes = [
  { path: '', component: AdminComponent, canActivate: [AuthGuard], children: [
    { path: 'users', loadChildren: () => UserModule }
  ]}
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

user.module.ts

@NgModule({
  declarations: [
    UserComponent,
    UserManageComponent,
    UserListComponent
  ],

  imports: [
    CommonModule,
    FormsModule,

    UserRouting,
    SharedModule
  ]
})

user.routing.ts

const routes: Routes = [
  { path: '', component: UserComponent, children: [
    { path: '', component: UserListComponent },
    { path: 'new', component: UserManageComponent },
    { path: ':id/edit', component: UserManageComponent }
  ]},
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

And there's the problem:

What I expected my application routing does:

/users => not a valid route
/users/new => not a valid route

/admin/users => valid route
/admin/users/new => valid route
/admin => valid route (should render AdminComponent)

I don't know why, but if I enter /users, the applications render UserComponent, what is not the behavior I would like to.

I would like UserComponent to be accessed only from /admin/users.

Does anybody could explain me why?

Because you're redirecting everything to admin: `{ path: '', redirectTo: 'admin', pathMatch: 'full' }` — jonrsharpe, Jun 21 '17 at 18:39
That's not the problem. Even if I remove this path, the application still does not work as expected. /users should not be available, but /admin/users. — Guilherme Chiara, Jun 21 '17 at 18:58
Bonus from the [style guide](https://angular.io/guide/styleguide#style-02-12): *Do end the filename of a RoutingModule with `-routing.module.ts`* (the CLI will do this for you) — Leo, Oct 22 '17 at 16:09

score 1 · Answer 1 · edited Jul 07 '17 at 18:30

1

Did you already try to move AppRouting imports to end of imports array as is suggested here?

edited Jul 07 '17 at 18:30

sf_

1,138
2
13
28

answered Jul 07 '17 at 16:44

Hows Leal

11
3

score 1 · Answer 2 · answered Jul 07 '17 at 18:22

1

Try this to see:

admin.routing.ts

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], 
        children: [{ path: 'users', loadChildren: () => UserModule }]}
];

answered Jul 07 '17 at 18:22

Blockchain Nerd

437
5
11

Routing & Modules

2 Answers2