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
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),
}]
}
];
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 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 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 { }