Angular: two different modules or single module

Question

I recently started working on Angular (Angular5). My application has tabs named Home, School, Office and I have two types of users Admin and non-admin. As soon as the Office tab is clicked Admin page will be redirected to Admin page and non-admin user will be redirected to non-admin page.

So, for this requirement do I need to make two different modules? OR shall I make a single module and redirect on the bases of user types? Please guide me with the project structure.

Answer 1

Yes, you need to 2 different modules as they are both a separate feature and Lazy Load them on your parent route (e.g AppRouting or others). Supposedly, on your Admin it has features that the Non-Admin doesn't have and they both have different roles in your application. So you should separate them based on their feature.

Feature Module

• create multiple feature modules for every independent feature of the application

• help you partition the app into focused areas

• Keep code related to a specific functionality or feature separate from other code

https://angular.io/guide/feature-modules#feature-modules-vs-root-modules

For your case, your feature modules are your /admin and /non-admin (or any terms you used on your directory). Under those are its components, services, routing and ngModule.

Answer 2

Modules are not separated by roles of your application - Separation of modules is the process of separating your code based on no complexity if in case you have a component that need to be used in multiple places you can move that component to a shared module and import that module into all your sub modules - if you want to load a module Lazily you can work on loading a module Lazily

In your case - the word is route for you - you can check whether the user has admin or non-admin while routing, that can be achieved by using Resolver which does magic for you - check this link for further queries

Try something like this

Router

{
    path: 'pathName',
    component: ComponentName,
    resolve: { RolePermission: RolePermissionService },
}

RolePermissionService

@Injectable({
  providedIn: 'root'
})
export class RolePermissionService implements Resolve<object | string> {

  constructor(private router: Router) {
    }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | string> | Promise<boolean | string>  {
        return new Promise(resolve => {

             return resolve(true);

            // Your logic here - Call the service to check whether admin or non-admin
            // Bind the data in your route or you can navigate from here
        });
    }
}

So the return data will bind to the RolePermission object in your route and finally you can read it in your component

Component

In you component you can read that data like this

this._activatedRoute.snapshot.data["RolePermission"].ISSubmitSlotRequest;

So this will solve your problem you can map this service to all the routes you want and you can get the role of the user - I'm not against module creation this will be a better way to read the roles on routing - check that link for more idea - Happy coding :)