My Requirement is From Backend I am getting routes as "app/dashboard?dashboard_id={id}"
How can I configure this in Module.ts file?
I tried using below
const routes: Routes = [
{
path: "app/dashboard/:dashboard_id",
component: AddEditComponent,
canActivate: [AuthGuard],
},
];
but I am getting errors like routes are not defined.
Can Someone Please Help me on that how can I configure this route as I need to catch this id as queryParams in Component.
You can do something like this:
const routes: Routes = [
{
path: "app/dashboard",
component: AddEditComponent,
canActivate: [AuthGuard],
children: [
{
path: ':dashboard_id'
component: NewComponentId
}
]
},
];
and in your NewComponentId you can do something like inside the constructor to catch the id:
this.route.paramMap.pipe(
map((paramMap) => {
if (paramMap.get('id') !== 'something') {
// your code
}
}),
Required Route param:
{path: 'users/:userId', component: UserComponent}
and get it from param:
constructor(params: RouteParams) {
var paramId = params.get("id");
}
Optional Route Param:
{ path: '/user', component: UserComponent }
its just define the route part and param pass by query string, to read the queryparam:
this.route.queryParams
.subscribe(params => {
console.log(params);
}
);
you must process the query string for this route: "app/dashboard?dashboard_id={id}"
Update:
To set the queryparam in routerlink use it this way:
<a routerLink="/dashboard" [queryParams]="{ dashboard_id: 11 }"
>another dashboard</a>
Related
Is there any way to do the nexted optional routing in Angular 8.
{
path: 'mfa',//ConstantValues.route_list[0].route,
data: { 'navBar': false },
children: [
{ path: '', redirectTo: 'reset', pathMatch: 'full' },
{ path: 'mfa-code', component: MfaVerificationCodeComponent },
{ path: ':app', component: MfaMobileAppsComponent },
{ path: ':app/:provider', component: AppProviderComponent }
]
}
I am focusing in these two lines
{ path: ':app', component: MfaMobileAppsComponent },
{ path: ':app/:provider', component: AppProviderComponent }
URL I am trying to achieved
https://localhost:44307/mfa/google/apple --> google and apple is optional
https://localhost:44307/mfa/okta/google --> okta and google is optional
I don't want to use the query parameter because I have some other conditions. And how do I get the value of the url in TS file.
To navigate I need to use and this works
protected submit(model: MfaAppViewModel) {
this.router.navigate(['{providerName}'], { relativeTo: this.route });
}
Another Example
{path: 'studentList', component : StudentListComponent},
{path: 'studentDetails/:id/:name/:marks', component : StudentDetailsComponent}
<a routerLink="/studentDetails/{{stud.id}}/{{stud.name}}/{{stud.marks}}"> Id : {{stud.id}}, Name : {{stud.name}} </a>
To read the value in TS file
this.providerName = this.route.snapshot.params['provider'];
i have two routes :-
1- http://localhost:4200/members/10 ===> this for member's page
2- http://localhost:4200/members/10?tab=3 ===> this for chat page
I want to make chat as a paid service so I create component I called it charge with this route ==> http://localhost:4200/charge so if any member like to go to chat route he will be redirected to charge page as I create code in ngOnInit method in chat component like that
if(!this.authService.paid)
{this.router.navigate(['charge']);}
When I go chat it redirects me to charge page and that's cool , the problem is that when I go member'page it redirects me to charge page and that's not cool at all, so please help me what can i do to solve this problem, thanks in advance
and this is my routes
export const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{
path: '',
runGuardsAndResolvers: 'always'
, canActivate: [AuthGuard],
children: [
{
path: 'members', component: MemberListComponent, resolve: {
users: MemberListResolver
}
},
{
path: 'member/edit', component: MemberEditComponent, resolve: {
user: MemberEditResolver
}, canDeactivate: [PreventUnsavedChangesGuard]
},
{
path: 'members/:id', component: MemberDetailComponent, resolve: {
user: MemberDetailResolver
}
},
{
path: 'lists', component: ListsComponent, resolve: {
users: ListResolver
}
},
{ path: 'messages', component: MessagesComponent, resolve: { messages: MessageResolver }, canActivate: [MessagesGuard] },
{ path: 'charge', component: PaymentComponent }
]
},
{ path: '**', redirectTo: '', pathMatch: 'full' }
];
It looks like you use the same ngOnInit implementation for both pages '/member' and '/chat'. And if this !this.authService.payed returns true, you will always be redirected to '/charge' page.
But to have a better understanding, please provide your routing configuration.
Edit:
Thank you for adding your routes.
{
path: 'members/:id', component: MemberDetailComponent, resolve: {
user: MemberDetailResolver
}
}
It seems like you check for !this.authService.payed in MemberDetailComponent#ngOnInit, but you probably do not check your queryParam ?tab=3.
To fix this issue quickly you can modify your if-condition:
if(!this.authService.payed && this.route.snapshot.queryParams['tab'] === 3)
where this.route has to be injected via constructor parameter
constructor(private route: ActivatedRoute)
But
I think the best solution for this issue would be to add another child route for chat page and handle authorization with another 'canActivate'.
I have an app where i want to lazy load two modules in the same moment with the same route path.
My routing module would look like this :
{
path: 'mypath',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
but this lead to load only the first one
i cant' find anyway to do it like this for example :
{
path: 'mypath',
loadChildren: () => HomeModule, advisor module // ??
canLoad: [// ??]
},
I don't want also to import one of them in the other , as like this , only one module would be lazy loaded and the other automatically
How may it do it ??
You could rework things like this:
const routes: Routes = [
{
path: 'mypath/home',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath/advisor',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
]
In other words move the route path to your module outside to the parent module, in this case I assume those are 'adviser' and 'home'
And then just start in the module routing with a redirect solution and/or a path like so:
Home module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'home'
component: HomeParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: HomeChildComponentOne },
],
},
];
Advisor module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'advisor'
component: AdvisorParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: AdvisorChildComponentOne },
],
},
];
This works nicely, you should be able to navigate to:
'/mypath/home' and end up inside your HomeParentComponent with router outlet of HomeChildComponent one.
'/mypath/advisor' and end up inside your AdvisorParentComponent with router outlet of AdvisorChildComponent one.
In case you don't want a child component inside your router outlet it is even simpler, you can just remove the child routes and redirect.
Note: If this solution doesn't resolve your issue, then please share more details on your module routing so I can get a better picture of your desired route configuration.
You need to re-arrange your routes by one level and you also need to add auxiliary routes for the extra components you want to load.
This works with Angular 9 (probably with 8 too)
{
path: 'home',
component: HostingComponentWithOutlets,
children: [
{
path: 'featureOne',
loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
canLoad: [featureOneGuard]
},
{
path: 'featureTwo',
outlet: 'outletAux1',
loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
canLoad: [featureTwoGuard]
},
// you can even load more components to different outlets from the same module
// and update redirectTo and routerLink accordingly
//{
// path: 'featureThree',
// outlet: 'outletAux2',
// loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
// canLoad: [featureTwoGuard]
//},
{
path: '',
redirectTo:
'/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
pathMatch: 'full'
}
]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }
Hitting the 'home' route will lazy load all required modules.
In your HostingComponentWithOutlets html template where you need to link to 'featureOne':
<a [routerLink]="featureOne/path-to-featureOne-component"
and if you want to go straight to the full route with the auxiliary routes from a template:
<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"
FeatureOneModule should define 'path-to-featureOne-component' and FeatureTwoModule should define 'path-to-featureTwo-component' in their equivalent route definitions.
I'm trying to use the auxiliary route on an empty path. For example:
{
path: 'users',
children: [
{
path: '',
component: UsersComponent,
},
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
},
]
},
And my UsersComponent template:
<router-outlet></router-outlet>
<router-outlet name="list"></router-outlet>
But when I'm trying to navigate to the following URLs:
1. http://localhost:4200/users(list:user-details)
2. http://localhost:4200/(users//list:user-details)
I'm getting this error:
Cannot match any routes. URL Segment: 'users'
You are getting that error because you have no component loading for 'users' which you set as your first route. the 'users' route should be defined in your main routing module like this
{ path: 'users', loadChildren: './users/user.module#UserModule' }
and your current code needs to look like this
const userRoutes: Routes = [
{
path: '', component: UsersComponent, children: [
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
}
]
}
and that will make the firs route 'users'
I'm trying to get the redirect after login working based on the documentation from angular.
https://angular.io/docs/ts/latest/guide/router.html#!#teach-authguard-to-authenticate
I got basically the same setup albeit that some filenames are different.
The problem is that when i log the RouterStateSnapshot url in the authGuard,
it wil always output the first route from app-routing.module.ts ('/countries') instead of e.g. /countries/france/34
authGuard
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url = state.url;
console.log(state); // always outputs first route from app-routing.module.ts ('/countries')
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.userService.isLoggedIn()) {
return true;
}
this.userService.redirectUrl = url;
console.log(this.userService.redirectUrl);
// not logged in so redirect to login page
this.router.navigate(['/login']);
return false;
}
App routing module
const routes: Routes = [
{ path: '', redirectTo: 'countries', pathMatch: 'full', canActivate: [AuthGuard]},
{ path: 'login', loadChildren: './authentication/authentication.module#AuthenticationModule' },
{ path: 'countries', loadChildren: './countries/countries.module#CountriesModule'},
...
];
Country routing module
const routes: Routes = [
{ path: '', component: CountriesComponent, canActivate: [AuthGuard] },
{ path: ':name/:id', component: CountryComponent, canActivate: [AuthGuard] }
];
Hope someone can help
you are using same AuthGuard for all the paths, hence you are seeing that result, you can either create different Auth guards for different routes or have some logic to identify when the same canActivate is called.
Hope this helps!!