We have completed development of an Excel addin using the officejs API's. During the process of deploying it to App source we got a feedback that the addin shows blank screen when there is a slower internet connection. When we tried to debug it we got the following error ( when 3G Slow option is set in chrome ).
Uncaught Error: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.
But the same addin works fine when the internet speed is decent. Below is the piece of code that we have used to bootstrap the angular application.
Office.onReady().then(function() {
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
});
We are still not sure what went wrong but when we comment the single line inside the Office.onReady function and add consoles. It dosen't throw any error's ( I know this is irrelavent but still an observation which we made ). It would be great if someone could help us. Thanks in advance.
After a long investigation my collegues found out that the application size had significant impact on loading the extension inside excel after adding the following line of code in build script we were able to fix this
ng build --base-href=/excel/ --prod=true --aot=true --buildOptimizer=true --extractCss=true --extractLicenses=true --optimization=true --output-hashing=all --sourceMap=true.
Update
Previous size
runtime.js.map - 6.17 kb
main.js.map - 1.69 Mb
polyfills.js.map - 148 kb
polyfillses5.js.map - 567 kb
styles.css.map - 177 kb
vendor.js.map - 7.71 mb
After changing the build script
runtime.js.map - 1.51kb
main.js.map - 1.9Mb
polyfills.js.map - 43.1kb
polyfillses5.js.map - 123kb
styles.css.map - 61.3kb
The vendor.js.map file is removed after changing the build script which we suspect is the reason for quick initial load of the application.