Managing separate frontend assets for admin and site in Angular 2

Frontend
1

I’m working on an Angular 2 project using angular-cli. My app has two different frontends: one for the main site and another for the admin panel. Each frontend has its own set of assets.

I want to optimize the asset loading process. When a user opens the admin panel, I’d like to load only the admin-related assets. Similarly, when someone visits the main site, I want to load just the site-specific assets.

Right now, my project structure looks something like this:

src/
  ├── app/
  │   ├── admin/
  │   └── site/
  ├── assets/
  │   ├── admin/
  │   └── site/
  └── index.html

Can anyone suggest a good way to handle this asset loading situation in Angular 2? I’m looking for an efficient method to load assets selectively based on which part of the app is being accessed. Thanks for any help!

2

hey there! i’ve dealt w/ similar setups. have u considered using lazy loading for ur admin module? it’ll only load admin stuff when needed. also, u could use environment configs to set different asset paths for admin/site. that way, u can dynamically load assets based on the current route. hope this helps!

3

I’ve encountered this scenario in my projects. One effective approach is to leverage Angular’s routing system in combination with lazy loading. You can create separate modules for your admin and site components, then configure routes to load these modules on demand. This way, assets specific to each section are only loaded when necessary.

For asset management, consider using the Angular CLI’s build targets. You can define custom configurations in angular.json for admin and site, specifying different asset paths for each. This allows you to build and serve your application with the appropriate assets based on the target.

Additionally, implement a service to dynamically load CSS or other assets based on the current route. This provides fine-grained control over asset loading and ensures optimal performance for both your admin panel and main site.

4

ooh, interesting challenge! have u thought about using angular’s built-in asset management? you could set up different asset groups in angular.json for admin and site. then use the deploy command with --configuration flag to build separate bundles. thatd keep things neat and tidy. what do u think?