how to make route to wait till feature module is loaded in angular

Question

I have an angular app that have different lazily loaded modules. The structure of app.html is

<mat-toolbar></mat-toolbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

at the start of routing a page, the footer comes to the top just beneath the tool bar for a while till the lazily loaded modules finishes loading. this is also affecting it in SEO. for instance on google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/), the page is empty. I don't think i need to use angular route resolver, since the point here is to wait for modules to load not to wait for for data to arrive. how can i make route to wait till the module is loaded.

@DeepanshParmani what do you mean by the website is loading? — temesgen, Jun 14 '18 at 11:19

score 0 · Accepted Answer · answered Jun 15 '18 at 21:37

putting the the code below in index.html solved the problem of blank page on google page speed insight:

<script>
if (window.document.documentMode) {
  // polyfill IE11 in a blocking way
  var s = document.createElement('script');
  s.src = 'generated/ie-polyfills.min.js';
  document.head.appendChild(s);
} else if (!Object.assign) {
  // polyfill other non-evergreen browsers in a blocking way
  var polyfillUrl = "https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find&flags=gated&unknown=polyfill";
  // send a blocking XHR to fetch the polyfill
  // then append it to the document so that its eval-ed synchronously
  // this is required because the method used for IE is not reliable with other non-evergreen browsers
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = this.responseText;
    s.appendChild(document.createTextNode(code));
    document.head.appendChild(s);
  });
  xhr.open("GET", polyfillUrl, false);
  xhr.send();
}

according to this answer.

how to make route to wait till feature module is loaded in angular

1 Answers1