I have a small project that has packages (angular cdk, angular material, and firebase). Yet I have a built vendor.js file with size 4 MB.
As an approach to deal with problem, I want to show the progress of loading on slow connections (it takes up to 2 minutes to load 4 MB), so that users can see app is loading.
I have installed PWA and service-worker so that the app does not reload each time.
In order to answer the question: There is no easy way to show the user how long he has to wait till the app is loaded, but you can show him a simple animation.
Just include some CSS animations in your index.html. Everything inside app-root will be replaced by the app after startup.
<!-- index.html -->
<!doctype html>
<html>
<head>
<style>
.spinner {
height: 200px;
width: 200px;
animation: rotate 2s linear infinite;
transform-origin: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<app-root> <!-- selector from app.component.ts -->
<!-- loading layout replaced by app after startupp -->
<svg class="spinner" viewBox="25 25 50 50">
<style type="text/css">
circle{stroke:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-
width="2" stroke-miterlimit="10"/>
</svg>
</app-root>
</body>
</html>
Based on this Tutorial.
Apart from that, as maxime1992 said, you should use Angular in Production mode for minimum file sizes.
