Hey everyone! I’m working on an Angular2 project using angular-cli and I’ve got a bit of a puzzle. 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’m trying to figure out how to load only the admin assets when the admin panel is open and only the site assets when the main site is open. Right now, I’ve got everything in one big pile and it’s not very efficient.
My current setup looks something like this:
src/
├── assets/
│ ├── admin/
│ └── site/
├── app/
│ ├── admin/
│ └── site/
└── index.html
Can anyone give me some pointers on how to set this up properly? I want to keep things neat and make sure I’m not loading unnecessary stuff. Thanks in advance for any help!
hmm, that’s an interesting setup! have you considered using lazy loading for your admin module? it could help keep things separate and only load what’s needed. how are you currently handling routes between the main site and admin panel? maybe we could brainstorm some ideas for optimizing asset loading based on the route?
One approach you might consider is utilizing Angular’s built-in lazy loading capabilities. This would allow you to load the admin module and its associated assets only when needed. You could structure your app with feature modules, keeping the admin and site components separate. Then, use the Angular Router to load these modules on demand.
For asset management, you could leverage the angular.json file to define multiple build targets. Create separate configurations for your main site and admin panel, each with its own assets array. This way, you can specify which assets to include for each build.
Remember to optimize your assets as well. Minify and compress where possible, and consider using a Content Delivery Network (CDN) for frequently accessed resources. This approach should significantly improve your app’s performance and load times.