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 { }
Related
I have a problem with routerlinks in angular. I use routerlinks to redirect to the next page in my application.
If I start my applicaton with ng serve everything works fine. If I build my application with ng build --prod routerlinks return in some cases a 404.
The exact problem:
I am using a routeroutlet to display the different components. If I click on a routerlink which is in a component that is displayed in the routeroutlet I get a 404. If I use a routerlink that is in my component.html outside of the routeroutlet everything works fine.
That is my routeroutlet
<div class="">
<router-outlet></router-outlet>
</div>
That is my routerlink
<a [routerLink]="['overview']" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}"
class="btn btn-primary searchbutton">suchen</a>
and that are my routes:
const routes: Routes = [
{ path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'overview/:brand', component: OverviewComponent },
{ path: 'overview/:product', component: OverviewComponent },
{ path: 'coupons', component: CouponComponent },
{ path: 'impressum', component: ImpressumComponent },
{ path: 'datenschutz', component: DatenschutzComponent },
{ path: 'details/:id', component: ProductDetailsComponent },
{ path: 'home', component: LandingpageComponent },
{ path: '', component: LandingpageComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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
I want to create a whole new web application using ngx-admin theme.
I have created a new component named "OPERATION". But, I'm not able to get the routing for it.
Need help in routing..
Thanks in advance...
first you need to import your component and you need to add your component route to the routes in the app-routing.module.ts.
below is the routes in ngx admin app-routing.module.ts.
const routes: Routes = [
{
path: 'pages',
loadChildren: () => import('./pages/pages.module')
.then(m => m.PagesModule),
},
{
path: 'auth',
component: NbAuthComponent,
children: [
{
path: '',
component: NbLoginComponent,
},
{
path: 'login',
component: NbLoginComponent,
},
{
path: 'register',
component: NbRegisterComponent,
},
{
path: 'logout',
component: NbLogoutComponent,
},
{
path: 'request-password',
component: NbRequestPasswordComponent,
},
{
path: 'reset-password',
component: NbResetPasswordComponent,
},
],
},
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];
I am having issues navigating to a grand child route. The default route for the paths for the grand child works. When I am trying to navigate to the 'text' route, it doesn't recognize the route.
I have the following routes setup:
{
path: '',
pathMatch: 'full',
component: EmailListComponent,
children:[
{
path: '',
component: EmptyComponent
}
]
},
{
path: 'editor',
pathMatch: 'full',
component: EmailListComponent,
children: [
{
path: '',
component: MessageEditorComponent,
children: [
{
path: 'text',
component: TextActionBarComponent,
},
{
path: '',
component: NoActionBarComponent,
}
]
},
]
}
I am trying to navigation this route using:
this.router.navigate(['/editor/text'], {});
I have also tried
this.router.navigate(['text'], {});
and
this.router.navigate(['/text'], {});
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 { }