3

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?

Maciej Treder
  • 11,866
  • 5
  • 51
  • 74
Guilherme Chiara
  • 1,154
  • 2
  • 12
  • 15
  • 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

2 Answers2

1

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

sf_
  • 1,138
  • 2
  • 13
  • 28
Hows Leal
  • 11
  • 3
1

Try this to see:

admin.routing.ts

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