http://localhost:4200/dsc-ui/#message and if I type in the URL (remove #message and type application-management)
http://localhost:4200/dsc-ui/application-management (/application-management), it should redirect me to http://localhost:4200/dsc-ui/#/application-management. For any other route stay on http://localhost:4200/dsc-ui/#message.
How can i achieve this using angular?
You can set a new route in your Routes array in your router module, e.g.:
{ path: '/application-management', redirectTo: '/message', pathMatch: 'full' }
Are you want to add dynamic routing in your project ?
Or If you want to redirect you system if url is not existing in your system
then find below code
{ path: '', pathMatch: "full", redirectTo: "/yourdefaultcomponent" },
{ path: '404', component: NotFoundComponent },
{ path: '**', redirectTo: '404' }
Related
I have the following routing-modules:
app-routing.modules.ts
...
const routes: Routes = [
{
path: '',
loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule)
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then(m => m.UserModule),
canActivate: [AuthGuard]
},
{
path: 'shop',
loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
canActivate: [AuthGuard]
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
...
and shop-routing.modules.ts
const routes: Routes = [
{
path: '',
redirectTo: 'user',
pathMatch: 'full',
},
{
path: ':id',
component: ShopPageComponent
}
];
The problem is, since I'm starting the child route of 'shop' with ':id', it acts as a 'catch-everything' route. If i call 'localhost:4200/user' now, it loads the shopcomponent. Why is that like that? I thought 'shop' was the main route and the ':id' child is only called, when the link has 'shop/' as prefix. If I put 'shop/:id' before, it works fine, but then the route is also callable via 'localhost:4200/shop/shop/something' which is ugly and also my authGuard isn't working anymore.
App-routing.module.ts
const routes: Routes = [
{
path: '',
loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule),
pathMatch: 'prefix'
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then(m => m.UserModule),
canActivate: [AuthGuard],
pathMatch: 'prefix'
},
{
path: 'shop',
loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
canActivate: [AuthGuard],
pathMatch: 'prefix'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
pathMatch: 'prefix' will check for prefix path only and checks for child path for the rest of the path.
I am trying to create a route structure that would allow me to do the following.
Home.vue has one router view
/home/clients should load the Clients component
home/campaigns should load the Campaigns component
home/clients/:id should redirect to /home/clients/:id/campaigns and load the same Campaigns component.
I do not want to introduce another router view inside Clients component to handle the campaigns part. I was trying to get it done with following routes but really can't get it to work.
These are children routes to /home.
UPDATE: I got it working literally writing down every path that I may encounter. Is there a way I can elegantly solve this?
{
path: '/home',
name: 'Home',
component: Home,
beforeEnter(to, from, next) {
if (!store.getters.isLoggedIn) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
});
} else {
next();
}
},
children: [
{
path: 'clients',
component: Clients
},
{
path: 'clients/:clientId',
redirect: 'clients/:clientId/campaigns'
},
{
path: 'clients/:clientId/campaigns',
component: Campaigns
},
{
path: 'clients/:clientId/campaigns/:campaignId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads',
component: Ads
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'campaigns',
component: Campaigns
},
{
path: 'campaigns/:campaignId',
redirect: 'campaigns/:campaignId/ads'
},
{
path: 'campaigns/:campaignId/ads',
component: Ads
},
{
path: 'campaigns/:campaignId/ads/:adId',
redirect: 'campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'ads',
component: Ads
},
{
path: 'ads/:adId',
redirect: 'ads/:adId/postings'
},
{
path: 'ads/:adId/postings',
component: Postings
},
{
path: 'postings',
component: Postings
}
]
}
I am getting the following error after configuring child routes.
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'parent/child1
app.routing.ts
{ path: 'home', component: homeComponent},
{ path: 'about', component: aboutComponent},
{ path: 'parent', component: parentComponent,
children:[
{
path: '',
redirectTo: '/parent/child1',
pathMatch: 'full'
},
{
path: 'child1',
component: child1Component,
outlet: 'subRouter'
},
{
path: 'child2',
component: child2Component,
outlet: 'subRouter'
}]
},
{ path: '**', redirectTo: 'home', pathMatch: 'full' }
In my index.html, I have <router-outlet></router-outlet>
In my parent.htm(parentComponent) I have <router-outlet name="subRouter"></router-outlet>
What am i missing? Why i am getting that error? How can i resolve this error?
The parent route children '' path redirection should changed to below, and explicitly mention outlet:component value.
redirectTo: '/child1(subRouter:child1)'
Because /parent will be implicitly included as you're redirecting from child route.
In my angularjs application with ui.router I can do following:
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<div data-ui-view></div>'
})
.state('app.auth', {
url: '',
abstract: true,
controller: 'AuthShellController as vm',
templateUrl: 'views/auth/auth-shell-view.html'
})
.state('app.ui', {
abstract: true,
templateUrl: 'views/ui-shell-view.html',
controller: 'ShellController as vm'
and my angular2 application routes config:
const appRoutes:Routes = <Routes>[
{
path: '',
component: DashboardComponent,
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'presentation',
children: [{
path: 'new',
component: PresentationComponent
}, {
path: ':id',
component: PresentationComponent
}]
},
];
In angularjs I can resolve same url by states, so if I have authorization state I render just login form without header, sidebar.
If I have application state I render shell with header, footer, sidebar and so on.
Question
How can I manage base layouts in angular2 router?
I found a way that works for me to manage base layouts: https://stackblitz.com/github/jbojcic1/angular-routing-example?file=src%2Fapp%2Flayout%2Flayout-routing.module.ts
In this example I have featureA and featureB modules which use base layout with header and sidebar and login feature which doesn't use any base layout.
The only thing I don't like here is that each time you add a new module which uses some base layout, you need to modify routing file for that base layout, because this violates open/closed principle.
My current Route config looks like this
{
path: '',
redirectTo: 'register/account',
pathMatch: 'full'
},
{
path: 'register/account',
component: AccountRegisterComponent
},
{
path: 'register/auto/:Id',
component:AutoregisterComponent
},
If a user tries to navigate to '/register/auto'. Currently I see a blank page and an error in the console.
How can I show a 404 error or a message saying that this page is not available globally?
See angular2 cheatsheet
You can do something like this:
{path: '**', redirectTo: '/404' }
So for example you would have something probably like this:
{path: '/404', component: NotFoundComponent},
{path: '**', redirectTo: '/404' }
Hope that helps