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'], {});
Related
I'm new to Ionic 5 and trying to use Angular 9 lazy loading with navController.navigateForward, but it's not working.
I don't know if it's something in relation to the way I'm setting up the routers, or what.
And I couldn't find official information about navigateForward anywhere.
When I click "go to details" (below), I get an error Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details/'
This is the TabsPage:
tabs-routing.module.ts router:
const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
{
path: '',
redirectTo: 'films',
pathMatch: 'full'
},
{
path: 'films',
children: [
{
path: '',
loadChildren: () => import('../films/films.module').then(m => m.FilmsPageModule),
pathMatch: 'full'
}
]
},
{
path: 'people',
children: [
{
path: '',
loadChildren: () => import('../people/people.module').then(m => m.PeoplePageModule),
pathMatch: 'full'
}
]
},
{
path: 'planets',
children: [
{
path: '',
loadChildren: () => import('../planets/planets.module').then(m => m.PlanetsPageModule),
pathMatch: 'full'
}
]
}
]
}
];
films.page.html :
<ion-header>
<ion-toolbar color="primary">
<ion-title>Films</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button expand="full" (click)="openDetails()">Go to Details</ion-button>
<ion-button expand="full" (click)="goToPlanets()">Switch to Planets</ion-button>
</ion-content>
films.page.ts :
import { Component, OnInit } from '#angular/core';
import { NavController, NavParams } from '#ionic/angular';
#Component({
selector: 'app-films',
templateUrl: './films.page.html',
styleUrls: ['./films.page.scss'],
providers: [NavController, NavParams]
})
export class FilmsPage implements OnInit {
constructor(public navCtrl: NavController, public navParams: NavParams) { }
ngOnInit() {
}
openDetails() {
// original code adapted to ionic 5
// this.navCtrl.push('FilmDetailsPage');
this.navCtrl.navigateForward('/details/'); // not working !!
}
goToPlanets() {
// original code adapted to ionic 5
// this.navCtrl.parent.select(2);
this.navCtrl.navigateRoot('/tabs/planets'); // working fine
}
}
films-routing.module.ts router:
const routes: Routes = [
{path: '', component: FilmsPage, children: [
// if I don't comment this, I get an error
// {path: '', redirectTo: 'details'},
{path:'details', children: [
{
path: '', loadChildren: ()=> import('../film-details/film-details.module').then(m => m.FilmDetailsPageModule), pathMatch: 'full'
}
]
}
]}
];
film-details.page.html :
<ion-header>
<ion-toolbar>
<ion-title>filmDetails</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
I did the same with a detail page but we did it with a variable id.
Your case should be this
const routes: Routes = [
{
path: '',
component: FilmsPage
},
{
path: 'details',
children: [
{
path: '',
loadChildren: () =>
import('../film-details/film-details.module')
.then(m => m.FilmDetailsPageModule),
pathMatch: 'full'
}]
}
];
To set the id instead of "detail" to the route so you can access it via deep linking for the future.
const routes: Routes = [
{
path: '',
component: FilmsPage
},
{
path: ':filmsID',
children: [
{
path: '',
loadChildren: () =>
import('../film-details/film-details.module')
.then(m => m.FilmDetailsPageModule),
}]
}
];
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 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 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 { }