separate styles for separate module in Angular 5

Question

My project has two main parts. One for public web pages and the other for admin control panel. Each of them has separate CSS and javascript files for their template.

If I define all CSS and js files in index.html, all files load in the first meet of the web page, and also maybe have a conflict between CSS classes.

How can I handle this problem?

app.component:

<router-outlet></router-outlet>

app-routing.module:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { FirstComponent } from './first/first.component';


const appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  {
    path: 'controlpanel',
    loadChildren: 'app/control-panel/control-panel.module#ControlPanelModule'
  },
  {
    path: 'publicpanel',
    loadChildren: 'app/public-panel/public-panel.module#PublicPanelModule'
  }
];

each module has its submodules. Can I separate their styles?

Answer 1

Use sass and create a class flag for public and admin components like this

theme/_public.scss

.public{ 
  label { 
    color:red;
  }
}

theme/_admin.scss

.admin { 
  label {
    color:green;
  }
}

and this in main style.scc

@import "theme/_public.scss";
@import "theme/_admin.scss";

this is much better for app performance you will have one style file with public and admin pages style

stackblitz example