Odtnhj

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?

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> 
 constructor(private backend: Backend) 

 resolve(
 route: ActivatedRouteSnapshot,
 state: RouterStateSnapshot
 ): Observable<any>

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 !!