I'm currently working on angular2 app in whose index.html I inject my app-root. What i'm trying to achieve is to bring my landing page html,css,js in index.html itself and when user clicks on any of the links on the page I want the angular app to start handling that. The reason for doing this is my angular app js payload is too big - main.js being around 500Kb. I have already performed all the optimisations and tree shaking possible. This is impacting my lcp and other metrics too much especially in mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<app-root></app-root>
</body>
</html>
Further my app-root has router-outlet for handling each of the routes.
Update: For solving the first case i believe we'll have to host two apps one static app which is redirected to spa just like gmail.