i make an dashboard app for manage data using angular 6. but i stuck when i nest more than 1 lazyload route, it's not work, It's seem like can not add more than 1 lazyload route in angular router
My App routing :
const appRoutes: Routes = [
{
path: '',
component: SigninComponent,
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: './core/dashboard/dashboard.module#DashboardModule'
}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
my dashboard route
const dashboardRoutes: Routes = [
{
path: '',
component: DashboardComponent,
children: [
{
path: 'products',
pathMatch: 'full',
loadChildren: './products/products.module#ProductModule'
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(dashboardRoutes)],
exports: [RouterModule]
})
My product route:
const productRoutes: Routes = [
{
path: '',
component: ProductListComponent,
children: [
{
path: ':id',
component: ProductEditComponent
},
{
path: 'addproduct',
component: ProductCreateComponent
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(productRoutes)],
exports: [RouterModule]
})
when i access localhost:4200/dashboard/products/id3 it take an error: can not match any route 'dashboard/products/id3'. I think i wrong some where in routing setup but i cant not find where is an error. Anyone can help me ?
I've create a page for you..Just check and do the changes accordingly. You need to check module path correctly otherwise it should work with no issue. You can change the url to hello.
https://stackblitz.com/edit/angular-lazy-loading-nweyjt
// For eg.
// https://stackblitz.com/edit/angular-lazy-loading-nweyjt/hello/3
Related
Following is my router page:
export const AppRoutes: Routes = [
{
path: '',
component: PublicComponent,
children: [
{
path: '',redirectTo: '/',pathMatch: 'full'
},
{
path: 'home',loadChildren: () => HomeModule
}
]
} ,
{
path: '',component: AdminComponent, children: [
{
path: 'dashboard', loadChildren: () => DashboardModule
}, {...}
]
},
{ path: '**', redirectTo: '/home', pathMatch: 'full' }
];
#NgModule({
imports: [
RouterModule.forRoot(AppRoutes, {scrollPositionRestoration: 'enabled'})
],
exports: [RouterModule]
})
When I run the project for the first time, it gives me the above error.
Note:I'm implementing lazy loading approach.
I'm not really familiar with the syntax you've used for loadChildren. Try this instead:
loadChildren: './path/to/your.module#YourModule
This GitHub issue suggests that fix. It looks like the issue here may be similar: https://github.com/angular/angular/issues/31206
I'm currently working on a portfolio. My intention is to only change the route ("portfolio" and its child route "all" which is displayed immediately) as soon as the images on that specific route are fully loaded. When the route was clicked as progress bar from Angular Materials shall be displayed.
Since I'm a beginner with angular I unfortunately can't provide any code, but my app-routing.module.
Browsing the internet I found a similar question, which I didn't really understand:
https://forum.vuejs.org/t/load-images-before-changing-route/11479
App-Routing.Module:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent},
{ path: 'portfolio', component: PortfolioComponent, children: [
{ path: '', redirectTo: 'all', pathMatch: 'full'},
{ path: 'all', component: AllComponent},
{ path: 'wedding', component: PortfolioweddingComponent},
{ path: 'adventure', component: PortfolioadventureComponent},
]},
{ path: 'book-me', component: BookMeComponent},
{ path: 'book-me/wedding', component: WeddingComponent},
{ path: 'book-me/adventuresession', component: AdventuresessionComponent},
];
#NgModule({
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}), RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I am working on Angular 6 application and have route survey that is config on app root level and then :id to take it survey detail page, I am trying to navigate from component using
this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
But I believe I am missing something from router navigate as I am unable to do so.
App route
const routes: Routes = [
{ path:'welcome', component:WelcomeComponent },
{ path:'', redirectTo: 'welcome', pathMatch:'full'},
{ path:'survey', loadChildren: '../survey/survey.module#SurveyModule' },
{ path:'**', component:PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
survey module
const routes: Routes = [
{
path:'',
component:SurveyComponent,
},
{
path:':id',
component: SurveyFormComponent
}
];
#NgModule({
imports:[
RouterModule.forChild(routes)
],
exports:[]
})
export class SurveyRouting{
}
component
private handleSelectedSurvey(dataItem:any){
this.listedSurvey = dataItem;
const a:number = 2;
//this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
this.router.navigate(['/survey'],{queryParams:{id:a}});
}
Change the navigate()
this.router.navigate(['/survey', this.listedSurvey.surveyIdNum]);
Refer: https://angular.io/api/router/Router#navigate
I have problem with HTML like the images below:
Error :
I clicked a button to move to the page with path: /page/:beecow, the last HTML will show if '/page/:beecow' have an error. The last HTML is 'market' in app-routing
I'm using angular version 4.3.5
// Here is my app-routing
const appRoutes: Routes = [
{
path: '',
component: LandingPageComponent,
pathMatch: 'full'
},
{
path: 'page', // Navigate to here
loadChildren: './page/page.module#PageModule'
},
{
path: 'market',
loadChildren: './market/market.module#MarketModule'
},
{
path: '**', redirectTo: ''
}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// Here is my page-routing
const routes: Routes = [{
path: '', component: PageComponent,
canActivate: [AuthGuardService],
children: [
{
path: 'upload-product',
component: ProductComponent,
pathMatch: 'full',
data: {
authorities: ['ROLE_STORE'],
pageTitle: 'beecow.store.item.productTitle'
},
canActivate: [RoleGuardService],
canDeactivate: [NavigationService]
},
{
path: ':beecow', // if The component have error, html expanded
component: ManageItemComponent
}
]
}];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageRoutingModule { }
Initially the app displays login page and navigates to maincontent component now i want to navigate from dashboard component to app details component but am getting an error as
Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
In my app.module.ts i have imported all the components
below is the routes that i have mentioned in app.module.ts
const appRoutes: Routes=[
{ path:'', redirectTo:'/login',pathMatch:'full'},
{ path: 'login', component: LoginComponent},
{ path: 'maincontent', loadChildren:
'./maincontent/maincontent.module#MainContentModule'
}
];
below is the routes mentioned in MainContentModule
export const ROUTES: Routes = [
{
path: 'maincontent',
component: MainContentComponent,
children: [
{ path: 'dashboard', component:DashboardComponent,
loadChildren: './dashboard/dashboard.module#DashboardModule' },
]
}
];
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
declarations: [],
exports:[
RouterModule,
]
})
export class MainContentModule {}
In my DasboardModule
export const ROUTES: Routes = [
{
path:'dashboard', component:DashboardComponent,
children:[
{
path:'application',component:ApplicationDetailsComponent
}
]
}
]
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
declarations: [ ],
exports:[
RouterModule,
]
})
export class DashboardModule { }
Any help would be appreciated
Add DashboardComponent in your MainContentModule declarations:
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
declarations: [DashboardComponent ],
exports:[
RouterModule,
]
})