How to hide angular2 module implementation for particular user role in Angular2 + ASP.NET MVC application?

Question

In the application i should ensure that particular user role, can't see some component implementation, that was designed for other user roles (admin must see everything, and user shouldn't see admin specific stuff).

What would be the best practice for it?

Current solution:

In my asp.net mvc application i have systemjs.config.js file that points to Main angular module that bootstraps entire angular2 application.

packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },

I do have modules:

AdminModule
UserModule
SharedModule
AdminSpecificComponentsModule

I don't want User to see implementation of AdminSpecificComponentsModule. Html templates, js...

So i use 2 systemjs.config.js files. Instead of single Main module entry point having 2 MainAdmin and MainUser, where MainUser not injecting AdminSpecificComponentsModule.

Each user role has int's own MVC View/Controller (calling it workplace), where appropriate systemjs.config.js being referenced.

<script src="../user-systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>
<user-app></user-app>

And

<script src="../admin-systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>
<admin-app></admin-app>

In production environment we'll have to boundle JS, HTML for each user role separately and ensure User can't serve bundles that intended for Admin role.

Is there more clever way of doing such a things using that technology stack?

Thanks in advance