Hi All,
I am quite new to meteor and as a first step (after the tutorials) I am trying to port a pure angular app into angular-meteor.
Basically at this point I simply want meteor to serve me and render correctly the frontend of the app, there’s no backend (yet).
From what I understand it should be possible to install angular-meteor and simply run the app almost as-it-is by putting it in the client folder, since as said it doesn’t really do much with data yet.
Now, the problem is that even if eventually I plan to refactor the app to follow the best meteor practices (es6 import/export for modules, lazy loading from the imports folder, etc), I would like to make the app work with the minimum effort as a proof of concept before going on with the refactorings.
And the main issues is with loading libraries. The app has been created as a quick prototype, so it basically has a local folder lib with all its javascript dependencies, mainly angular and several angular-related libraries like angular-material, angular-route, angular-translate, etc.
The app used to load these libraries using script tags in the head of its index.html:
html lang=“en” ng-app=“whatever”>
head>
<script src="js/lib/jquery/jquery.min.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular-animate/angular-animate.min.js"></script>
<script src="js/lib/angular-aria/angular-aria.min.js"></script>
<script src="js/lib/angular-route/angular-route.js"></script>
<script src="js/lib/angular-material/angular-material.min.js"></script>
<script src="js/lib/angular-messages/angular-messages.min.js"></script>
<!--TRANSLATIONS-->
<script src="js/lib/angular-cookies.min.js"></script>
<script src="js/lib/angular-translate.min.js"></script>
<script src="js/lib/angular-translate-loader-static-files.min.js"></script>
<script src="js/lib/angular-translate-storage-cookie.min.js"></script>
<script src="js/lib/angular-translate-storage-local.min.js"></script>
<!--TRANSLATIONS-->
<script src="js/lib/angular-local-storage.min.js"></script>
<script src="js/lib/moment.js"></script>
<script src="js/lib/angular-moment.js"></script>
MORE LIBRARIES
The app then relies on the fact that the libraries are available globally so in each module it can just use dependency injection without importing anything and it works.
This approach doesn’t work in meteor 1.3, I guess because the head gets preprocessed by meteor and the script tags gets removed, so the libraries never gets imported (or maybe they don’t get imported in the right order? not sure about it).
I tried several things:
1)my first approach was to remove all the tags, use meteor and npm packages for those libraries. However the rest of the app has several modules that expects those libraries to be available globally, while if I understood correctly using the packages imposes you to import every single dependency explcitely in every module that needs it.
Again: I know this is a cleaner/better approach and that’s where I want to go, but that requires quite a lot of work that I would like to do in a second phase, when at least I have my app running.
Moreover I did try this approach and I still had a lot of issues with a specific library, the angular-translate one(and the related ones). I might think that the issues I get are because they are not exporting correctly, so they might still rely on the library entities to be available at the global scope
2)Play a bit with trying to inject those script tags in the head using something like the inject-initial package, but I didn’t have a lot of luck either.
The question in short is:
I know this approach is not optimal and I plan to refactor it soon, but anyway, is there a way to make meteor 1.3 work with it to at least make it up&running?
Sorry again if I am overseeing something really trivial, as I said I come from more backend languages and I am quite unexperienced with meteor and the rest of the node environment
Thank you in advance for any answer!