admin管理员组文章数量:1390255
I'm Using nested modules in my project
.
└─ AppModule
├─ MallModule
├─ OtherModule
└─ ...
In the main route I only configured top-level routes:
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: 'login', ponent: LoginComponent},
{ path: 'register', ponent: RegisterComponent },
{ path: '404', ponent: NotfoundComponent },
{ path: '**', redirectTo: '404' }, // Added
]
Separately, I configured routes separately in each sub-modules, like:
mall-routing.module.ts
const routes: Routes = [
{
path: '',
ponent: MallComponent,
children: [
{
path: '',
ponent: HomeComponent,
},
{
path: 'about',
ponent: AboutComponent,
},
...
}
]
The result is, because that no other routes are defined in the main routing configs, all requests other than login/register/404 will be redirected to 404.
Is there anyway I can use a correct 404 redirection but keep the current route file structure? I don't hope to gather all route configs together.
Thanks!
I'm Using nested modules in my project
.
└─ AppModule
├─ MallModule
├─ OtherModule
└─ ...
In the main route I only configured top-level routes:
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: 'login', ponent: LoginComponent},
{ path: 'register', ponent: RegisterComponent },
{ path: '404', ponent: NotfoundComponent },
{ path: '**', redirectTo: '404' }, // Added
]
Separately, I configured routes separately in each sub-modules, like:
mall-routing.module.ts
const routes: Routes = [
{
path: '',
ponent: MallComponent,
children: [
{
path: '',
ponent: HomeComponent,
},
{
path: 'about',
ponent: AboutComponent,
},
...
}
]
The result is, because that no other routes are defined in the main routing configs, all requests other than login/register/404 will be redirected to 404.
Is there anyway I can use a correct 404 redirection but keep the current route file structure? I don't hope to gather all route configs together.
Thanks!
Share Improve this question asked Mar 5, 2019 at 8:53 DarklizardDarklizard 3774 silver badges17 bronze badges 4-
1
You need to import the modules in the root module OR use
lazy-loading
to load other modules and use their routes – Sachin Gupta Commented Mar 5, 2019 at 8:54 - @SachinGupta yes they are working fine currently, I just want to add a 404 page. I did not use lazy-loading because the breadcrumb is not working with that. – Darklizard Commented Mar 5, 2019 at 8:57
-
@JasonWhite Is
{ path: '**', redirectTo: '404' }
equals to your catch-call route? how should I config it? thanks. – Darklizard Commented Mar 5, 2019 at 9:11 -
Please add the code for the
imports
array of the AppModule (root) – Sachin Gupta Commented Mar 5, 2019 at 9:21
3 Answers
Reset to default 4import the 'Other' modules in your app modules, this will allow the routes defined in those modules to be used.
The updated code should look something like this:
imports: [
MallModule,
OtherModule
RouterModule.forRoot([ // Add the configuration here, which is not a part of other module ])
]
I arrived in at this question after one module worked fine with the routing but another gave 404 for all its subpages.
The problem for me was the order in app.modules.ts
. I had the submodules after the import of AppRoutingModule
in the list of imports. Once I moved that last, than the routing of submodules and 404 page worked fine.
In app.module.ts.
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
SubModule,
AuthorizationModule,
CommonModule,
FontAwesomeModule,
ProfileModule, // this was previously defined after AppRoutinModule
AppRoutingModule // this must be last in list for routing with 404 to work
]
and in app-routing.modules.ts.
const routes: Routes = [
// https://angular.io/guide/router
{ path: 'help', ponent: HelpComponent },
{ path: 'terms', ponent: TermsComponent },
{ path: 'contact', ponent: ContactComponent},
{ path: '404', ponent: PageNotFoundComponent},
{ path: '**', ponent: PageNotFoundComponent}
];
in routing load your modules like below
// MallModule
{
path: "path",
canLoad: [AuthGuard],
loadChildren: "./modules/MallModule.module#MallModule",
},
本文标签: javascriptAngular 404 page routing for nested modulesStack Overflow
版权声明:本文标题:javascript - Angular 404 page routing for nested modules - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1744721211a2621707.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论