Redirecting conditionally without using component Angular
up vote
1
down vote
favorite
I have a lazy module having two component, first and second. The module is loaded for a route lazy/:id. Depending on the type of id (an API call will return the type of id), we have to load the first or second component. To achieve this, currently a third component named resolver is added to the lazyModule, which loads for the path:'' route in lazyModule and makes the API call for id. The response is appended to the url and this.router.navigate is used to navigate to the first or second component.
The issue is that this functionality is being used in multiple places in the application and I would like to use a common code at a single place. Using a component with empty template doesn't appears to be a good idea. Is there any other way to achieve it maybe by using guard/service/resolver or any other feature.
I've made a minimal reproduction for this on stackblitz: https://stackblitz.com/edit/angular-8ylxq8?
angular angular-router
add a comment |
up vote
1
down vote
favorite
I have a lazy module having two component, first and second. The module is loaded for a route lazy/:id. Depending on the type of id (an API call will return the type of id), we have to load the first or second component. To achieve this, currently a third component named resolver is added to the lazyModule, which loads for the path:'' route in lazyModule and makes the API call for id. The response is appended to the url and this.router.navigate is used to navigate to the first or second component.
The issue is that this functionality is being used in multiple places in the application and I would like to use a common code at a single place. Using a component with empty template doesn't appears to be a good idea. Is there any other way to achieve it maybe by using guard/service/resolver or any other feature.
I've made a minimal reproduction for this on stackblitz: https://stackblitz.com/edit/angular-8ylxq8?
angular angular-router
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have a lazy module having two component, first and second. The module is loaded for a route lazy/:id. Depending on the type of id (an API call will return the type of id), we have to load the first or second component. To achieve this, currently a third component named resolver is added to the lazyModule, which loads for the path:'' route in lazyModule and makes the API call for id. The response is appended to the url and this.router.navigate is used to navigate to the first or second component.
The issue is that this functionality is being used in multiple places in the application and I would like to use a common code at a single place. Using a component with empty template doesn't appears to be a good idea. Is there any other way to achieve it maybe by using guard/service/resolver or any other feature.
I've made a minimal reproduction for this on stackblitz: https://stackblitz.com/edit/angular-8ylxq8?
angular angular-router
I have a lazy module having two component, first and second. The module is loaded for a route lazy/:id. Depending on the type of id (an API call will return the type of id), we have to load the first or second component. To achieve this, currently a third component named resolver is added to the lazyModule, which loads for the path:'' route in lazyModule and makes the API call for id. The response is appended to the url and this.router.navigate is used to navigate to the first or second component.
The issue is that this functionality is being used in multiple places in the application and I would like to use a common code at a single place. Using a component with empty template doesn't appears to be a good idea. Is there any other way to achieve it maybe by using guard/service/resolver or any other feature.
I've made a minimal reproduction for this on stackblitz: https://stackblitz.com/edit/angular-8ylxq8?
angular angular-router
angular angular-router
asked Nov 10 at 10:10
Sachin Gupta
36917
36917
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Service will work - because service will be a injector and if you just inject your service in root module you can make use of it in any module
Like this
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root',
)
export class HeroService
constructor()
You don't need to add the service in any of the module provider array - provideIn will take care of injecting in your root module
Finally - you are thinking of using it in many places that too while routing so you can call this service when routing happens and navigate to the specific components - to access some service before routing you can use route resolver
@Injectable()
class TeamResolver implements Resolve<Team> any
return this.backend.fetchTeam(route.params.id);
Insted of this.backend.fetchTem() method you can call your service - so you can remove your component and just mapp your resolver service
path: 'team/:id',
component: TeamCmp,
resolve:
team: TeamResolver
Way to access your resolver in your routing !! since resolver is also a service you can use it in any of your routes
Hope this helps - happy coding !!
Already thought about this. The issue is that I am loading theResolverComponenteverytime without any use. Even with your suggestion, I would be loading TeamCmp.
– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default routepath:''
– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property asresolvein your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing
– Rahul
Nov 10 at 18:05
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Service will work - because service will be a injector and if you just inject your service in root module you can make use of it in any module
Like this
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root',
)
export class HeroService
constructor()
You don't need to add the service in any of the module provider array - provideIn will take care of injecting in your root module
Finally - you are thinking of using it in many places that too while routing so you can call this service when routing happens and navigate to the specific components - to access some service before routing you can use route resolver
@Injectable()
class TeamResolver implements Resolve<Team> any
return this.backend.fetchTeam(route.params.id);
Insted of this.backend.fetchTem() method you can call your service - so you can remove your component and just mapp your resolver service
path: 'team/:id',
component: TeamCmp,
resolve:
team: TeamResolver
Way to access your resolver in your routing !! since resolver is also a service you can use it in any of your routes
Hope this helps - happy coding !!
Already thought about this. The issue is that I am loading theResolverComponenteverytime without any use. Even with your suggestion, I would be loading TeamCmp.
– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default routepath:''
– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property asresolvein your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing
– Rahul
Nov 10 at 18:05
add a comment |
up vote
0
down vote
Service will work - because service will be a injector and if you just inject your service in root module you can make use of it in any module
Like this
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root',
)
export class HeroService
constructor()
You don't need to add the service in any of the module provider array - provideIn will take care of injecting in your root module
Finally - you are thinking of using it in many places that too while routing so you can call this service when routing happens and navigate to the specific components - to access some service before routing you can use route resolver
@Injectable()
class TeamResolver implements Resolve<Team> any
return this.backend.fetchTeam(route.params.id);
Insted of this.backend.fetchTem() method you can call your service - so you can remove your component and just mapp your resolver service
path: 'team/:id',
component: TeamCmp,
resolve:
team: TeamResolver
Way to access your resolver in your routing !! since resolver is also a service you can use it in any of your routes
Hope this helps - happy coding !!
Already thought about this. The issue is that I am loading theResolverComponenteverytime without any use. Even with your suggestion, I would be loading TeamCmp.
– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default routepath:''
– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property asresolvein your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing
– Rahul
Nov 10 at 18:05
add a comment |
up vote
0
down vote
up vote
0
down vote
Service will work - because service will be a injector and if you just inject your service in root module you can make use of it in any module
Like this
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root',
)
export class HeroService
constructor()
You don't need to add the service in any of the module provider array - provideIn will take care of injecting in your root module
Finally - you are thinking of using it in many places that too while routing so you can call this service when routing happens and navigate to the specific components - to access some service before routing you can use route resolver
@Injectable()
class TeamResolver implements Resolve<Team> any
return this.backend.fetchTeam(route.params.id);
Insted of this.backend.fetchTem() method you can call your service - so you can remove your component and just mapp your resolver service
path: 'team/:id',
component: TeamCmp,
resolve:
team: TeamResolver
Way to access your resolver in your routing !! since resolver is also a service you can use it in any of your routes
Hope this helps - happy coding !!
Service will work - because service will be a injector and if you just inject your service in root module you can make use of it in any module
Like this
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root',
)
export class HeroService
constructor()
You don't need to add the service in any of the module provider array - provideIn will take care of injecting in your root module
Finally - you are thinking of using it in many places that too while routing so you can call this service when routing happens and navigate to the specific components - to access some service before routing you can use route resolver
@Injectable()
class TeamResolver implements Resolve<Team> any
return this.backend.fetchTeam(route.params.id);
Insted of this.backend.fetchTem() method you can call your service - so you can remove your component and just mapp your resolver service
path: 'team/:id',
component: TeamCmp,
resolve:
team: TeamResolver
Way to access your resolver in your routing !! since resolver is also a service you can use it in any of your routes
Hope this helps - happy coding !!
answered Nov 10 at 12:39
Rahul
9381315
9381315
Already thought about this. The issue is that I am loading theResolverComponenteverytime without any use. Even with your suggestion, I would be loading TeamCmp.
– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default routepath:''
– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property asresolvein your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing
– Rahul
Nov 10 at 18:05
add a comment |
Already thought about this. The issue is that I am loading theResolverComponenteverytime without any use. Even with your suggestion, I would be loading TeamCmp.
– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default routepath:''
– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property asresolvein your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing
– Rahul
Nov 10 at 18:05
Already thought about this. The issue is that I am loading the
ResolverComponent everytime without any use. Even with your suggestion, I would be loading TeamCmp.– Sachin Gupta
Nov 10 at 13:02
Already thought about this. The issue is that I am loading the
ResolverComponent everytime without any use. Even with your suggestion, I would be loading TeamCmp.– Sachin Gupta
Nov 10 at 13:02
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
Make your resolver component as service - you cannot load component everytime so try with service - Thanks
– Rahul
Nov 10 at 14:16
And how to use that service when I hit the default route
path:''– Sachin Gupta
Nov 10 at 14:24
And how to use that service when I hit the default route
path:''– Sachin Gupta
Nov 10 at 14:24
Yeah just add a property as
resolve in your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing– Rahul
Nov 10 at 18:05
Yeah just add a property as
resolve in your route and map a resolver service - in that service you just call your service and try to navigate, the resolver will run first before routing– Rahul
Nov 10 at 18:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237913%2fredirecting-conditionally-without-using-component-angular%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown