I am using Angular2 and Foundation 6 to create a webapp. I myself generate scripts and styles from Foundation .scss files.
Here is my index.html
<html> <head> <title>MyApp</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="scripts/foundation.min.js"></script> <link rel="stylesheet" href="styles/foundation.css"> </head> <body> <my-app>Loading...</my-app> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); setTimeout(function () { $(document).foundation(); }, 2000); </script> </body> </html>
As you can see, I had to add a timeout to correctly load some Foundation base blocks. If I delete this timeout, then Foundation does not work, and then its classes do not work.
What is the correct way to solve this problem? Why am I having trouble downloading Foundation?
source share