Angular2 with two frontend admin and site

Question

I am developing an app using angular-cli. The app has two frontend - site and admin. Both have different assets.

Load only Admin assets when Admin is open. Load only Site assets when Site is open. How i can do it? Currently i am having this structure.

Answer 1

One way is using lazy loading with asynchronous-routing, another way is conditionally build two apps from the same code base.

Answer 2

Way 1

I suggest you create both application separate, You can keep in single workspace for IDE, but keep separate startup and configuration for both site. because Admin site and User site always have different look and functionality. Lot's of tools we required to User site but no need in admin site and same for admin site. And also both site have different security point.

So as per my understanding, If you can keep both site as separate, this will very helpful.

So make two app and host both site on same domain. You can host both site on same domain using url rewrite. This will look as single application on same domain but both application separate in your IDE. So you can manage easily.

Way 2

But If your requirement not fulfilled with make different app and you want make both site on single application then make two module one for user site and second for admin site. Both module have there own routes and inject that module by lazy loading in main module which bootstrap your app.

Answer 3

Refer below link to separate your routing and load asynchronously

https://www.npmjs.com/package/angular2-async-route-loader.

You can load stylings globally without any problem. HTML will take the styles accordingly.