My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates.
If I include all CSS and js files in index.html, they all load at the beginning of the webpage, potentially causing conflicts between CSS classes.
How can I resolve this issue?
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 contains submodules. Is there a way to keep their styles separate?