How to manage separate assets for admin and site frontends in Angular2?

Frontend
1

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

I’m trying to figure out how to load assets selectively:

  • Only load admin assets when the admin panel is accessed
  • Only load site assets when the main site is accessed

My current project structure looks something like this:

src/
  ├── admin/
  │   ├── assets/
  │   └── components/
  ├── site/
  │   ├── assets/
  │   └── components/
  └── shared/
      └── services/

What’s the best way to handle this in Angular2? I want to keep the asset loading efficient and avoid unnecessary downloads. Any suggestions or best practices for managing multiple frontends with separate asset sets in a single Angular project would be really helpful. Thanks!

2

ooh, interesting setup! have u tried using different env files? they let u swap asset paths for admin and site via angular-cli builds. thought of that? curious how it might work for u.

3

Based on your project structure, I’d recommend using Angular’s built-in lazy loading feature to manage separate assets for admin and site frontends. This approach allows you to load modules and their associated assets on-demand, improving initial load times and overall performance.

Create separate modules for your admin and site components, then use Angular’s router to lazy load these modules based on the URL. In your routing configuration, you can specify the path for each module and use the loadChildren property to dynamically import the relevant module when needed.

For asset management, consider using the angular.json file to define multiple build targets. You can create separate configurations for admin and site, each with its own assets array. This way, you can control which assets are included in each build.

Remember to optimize your shared code to avoid duplication and leverage Angular’s dependency injection for services that are common to both frontends. This strategy should give you the flexibility and efficiency you’re looking for in managing your dual-frontend Angular project.

4

hey, have u considered using angular’s lazy loading? it’s pretty neat for ur setup. u can make separate modules for admin and site, then use the router to load em on demand. also, check out angular.json for managing assets per build. keeps things tidy n efficient. good luck!