Podwójny index.html w aplikacji angularowej

Hej, chciałbym w ramach jednej aplikacji angularowej zrealizować obsługę strony oraz panelu administratora. Część ze stroną już mam gotową, teraz chciałbym w ten raczej standardowy szablon aplikacji wpleść panel administratora, który ma korzystać z całkowicie innego szablonu. Zastanawiam się jak to można zrealizować i osiągnąć? Problem generalnie polega na tym, że chyba w jakiś sposób powinienem dodać drugi index.html. Spotkał się ktoś już z czymś takim i mógłby się podzielić wiedzą jak najlepiej to zrobić?

W angular.json masz file replacements i tam mozesz tez podmienic index.html na inny plik raz zdarzylo mi sie tak zrobic bo jakis tam klient chcial inny header/stopke czy tam jakies logo nie pamietam.
Ale ogolnie ja na twoim miejscu zrobilbym 2 appki czy to w jakims monorepo czy 2 roznych zalezy czy masz jakies czesci kodu ktory chcialbys wykorzystac w jednym i drugim bez babrania sie z gitem w jakies submodules itd....

@marcio: Właśnie w międzyczasie doczytałem na temat subaplikacji w ramach jednej aplikacji. Ogólnie wszystko spoko. Tylko jedno pytanie - chciałbym obydwie apki uruchamiać z jednego ngserve i w dodatku chciałbym mieć jeden wspólny routing, który pozwoliłby na płynne przejście pomiędzy aplikacjami (problemem tutaj jest to, ze one mają całkowicie inne layouty).

A po co Ci 2 strony index.html albo jakakolwiek podmiana? Możesz to zrobić tak, że twój AppComponent ma tylko <router-outlet>. Teraz masz dwa komponenty:

• HomeComponent - dla zwykłego użytkownika (osobny moduł)
• AdminComponent - dla admina (osobny moduł)

I w nich masz kolejny router-outlet do wyświetlania komponentów już stricte dla np. HomeComponent. Do tego możesz sobie zastosować LazyLoading modułów ( https://angular.io/guide/lazy-loading-ngmodules ) i children routy dla tych dwóch modułów ( https://angular.io/guide/router ).

@Aisekai:
Zrobiłem coś takiego:

const routes: Routes = [
  {
    path: 'app1',
    loadChildren: () => import('../../projects/app1/src/app/app1.module').then((m) => m.App1SharedModule),
  },
  {
    path: 'app2',
    loadChildren: () => import('../../projects/app2/src/app/app2.module').then((m) => m.App2SharedModule),
  }
];

Z tym, że mam taki objaw, że domyślnie wchodząc na localhost:4200 odpala mi się app1, natomiast jak wpisuję w urlu końcówkę 'app2' to mimo wszystko ładuje się app1. Co tu może nie grać?

Co znaczy, że ładuje Ci się app1? Czym się to objawia? W sensie leci do bundle? Pewnie leci z tego powodu, że masz go zadeklarowanego gdzieś w AppModule, ewentualnie importujesz App1SharedModule który eksportuje App1Component. Idea jest taka, że masz dwa moduły, które w "odpowiednim momencie" będą się dociągać do bundle, żeby nie pobierać zbyt dużo niepotrzebnego (od strony końcowego użytkownika) kodu. Twoimi "drugim plikiem index.html" (a w przyszłości możliwe że będą takie więcej) byłby inny komponent renderowany za pomocą router-outlet w AppComponent. Jeżeli możesz, wrzuć gdzieś to repo na githuba, to zerknę.

@Aisekai: Wiesz co, już to ogarnąłem. Jeszcze jedynie jedno pytanie, czy da się zrobić tak, zeby wymienialny był cały index.html? Bo teraz mam to tak, ze to są jakby dwa osobne projekty, ale ładują jedynie moduł, a nie zmieniają mi indexu.