J'essaye de créer un routeur parent-enfant en utilisant cette approche de structure de dossier. Tout d'abord, je veux être clair si cette structure de dossiers contenant des composants à l'intérieur des modules est correcte ou si je dois changer quoi que ce soit.
Si cela semble correct, j'ai du mal à créer un routeur imbriqué dont j'ai besoin pour fi. Problème expliqué ci-dessous avec l'exemple qui ne fonctionne pas et qui ne fonctionne pas ci-dessous?
Structure des dossiers
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
}
];
Mon app.routing a ceci
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'
}
]
}
];
4 Réponses :
Regrouper des composants étroitement liés dans un module de fonctionnalités est la voie à suivre!
Ce que vous essayez de faire s'appelle module de chargement paresseux . Consultez la documentation Angular pour ce sujet: https://angular.io/guide/lazy-loading- ngmodules .
Il vous manque la déclaration d'un UserRoutingModule dans user.routing.ts (je vous suggère de renommer le fichier en user-routing.module.ts < / code> pour suivre la convention). Il vous suffit ensuite d'importer UserRoutingModule dans UserModule ;)
Au fait, une fois que vous utilisez le chargement paresseux du module, vous devez compiler / servir votre application avec l'indicateur --aot (en avance). Vous pouvez en savoir plus ici: https://angular.io/guide/aot-compiler.
Bravo!
Êtes-vous sûr d'avoir importé tous les modules?
Vous devez importer RouterModule.forChild (UserRoutes) dans UserRoutingModule, puis, importez UserRoutingModule dans UserModule
vous devez vérifier l'url correcte
par exemple:
const userRoutes: Routes = [
{ path: 'create', component: CreateUserComponent },
{ path: 'list', component: ListUserComponent },
];
@NgModule({
imports: [RouterModule.forChild(userRoutes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
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 { }
Je pense que le problème est que vous n'aviez pas votre chemin vide - car si vous redirigez vers la route admim , votre route sera inégalée car les routes angulaires rechercheront une route vide dans enfants routes puisque vous n'en avez pas, cela ne correspondra pas à la route
Essayez quelque chose comme ça
{
path: '',
redirectTo: 'create',
pathMatch : 'full'
}
Maintenant, lorsque vous essayez de naviguer à admin votre FullCompoment sera rendu et si vous essayez / admin / user il chargera paresseusement votre module utilisateur
De la même manière, ajoutez un chemin vide à votre user-routing-module.ts
{
path: 'admin',
children: [
{
path: 'user',
loadChildren: './user/user.module#UserModule'
},
{
path:''
component:FullComponent
}
]
}
Très probablement, cela réglera votre problème - enfin assurez-vous que vous avez importé votre routage dans les modules respectifs - j'espère que cela vous aidera - Bon codage :)
n'ajoutez le hash (#) que dans app.router export const appRoutes = RouterModule.forRoot (routes, {useHash: true, onSameUrlNavigation: 'reload'});
Votre URL indique
utilisateursmais votre itinéraire autilisateurveuillez vérifier@Rahul Mon mauvais c'est un utilisateur partout. Je viens de recréer le nom du projet py, j'ai mis à jour la question.