I realize this is likely more of an Angular question than an ASP.Net Zero question, but I am having trouble finding an answer on my own and not sure if the ASP.Net Zero AppComponent used in the AppRoutingModule will affect the answer. I would appreciate some guidance if anyone can help me.
Using ASP.NET Zero v7.1.0 (ASP.NET CORE & Angular), what modifications should I make to main-routing.module.ts if I want to have a component (MainRootComponent) show for the following route: 'http://localhost:4200/app/main'
I understand how to add additional paths inside of 'main', but I am wondering how to get 'main' itself to show a component.
Here is one of my attempts:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MainRootComponent} from './main-root.component';
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
children: [
{ path: '', component: MainRootComponent, data: { permission: 'Pages.Tenant.Dashboard' }, pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } }
]
}
])
],
exports: [
RouterModule
]
})
export class MainRoutingModule { }
3 Answer(s)
-
0
Hi,
Have you tried something like this:
RouterModule.forChild([ { path: '', component: MainRootComponent, children: [ { path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } } ] } ])
-
0
Hmm, that got the root component to load as desired. Unfortunately, that's also what loads for the children now. Both '../app/main' & '../app/main/dashboard' are loading MainRootComponent.
-
0
Hi @rpollak
Sorry for my late reply. Could you share your entire ts file if you haven't solved this problem ?
Thanks,