Base solution for your next web application
Open Closed

Load Component for Root of Path #7416


User avatar
0
rpollak created

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)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Have you tried something like this:

    RouterModule.forChild([
    	{
    		path: '',
    		component: MainRootComponent,
    		children: [
    			{ path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } }
    		]
    	}
    ])
    
  • User Avatar
    0
    rpollak created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @rpollak

    Sorry for my late reply. Could you share your entire ts file if you haven't solved this problem ?

    Thanks,