I am trying to figure out how to do AoT and tree shaking using Meteor and Angular 2 but cant figure out how.
I know I need to bootstrap with with platformBrowser().bootstrapModuleFactory instead of platformBrowserDynamic.bootstrap but what I cant figure out is how to compile the code with ngc instead of tsc since this is done automatically by one of the angular2-meteor packages.
also is there a way to perform a tree shaking in the meteor build pipeline?
Same question here, it’s possible to do that with Meteor?
Like this post: http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
Regards!
So there is no way , that we can use angular 2 tree shaking and meteor together.
That is a shame because if you dont use that bundled javascript resource became huge and app is so slow.
As 1.5 release is dedicated to loading time, I’d assume tree shaking is on its roadmap? Can somebody clarify?
Right now i am struggling with the performance issues of angular 2 + meteor. Bundled js file is so huge that it’s gzipped size is 560 kb. So i am thinking seperating angular 2 from meteor and using ahead of time compiler and tree shaking and connection backend meteor with ddp . İf it is still slow then i will change angular 2 with aurelia or something else.
Because that is so so slow.
As written in initial post, there is a mention of All in one compiler for Angular2 that can do AOT: [barbatus:angular-compiler] (https://atmospherejs.com/barbatus/angular-compiler) written by @barbatus but I am having difficulties with ngfactory reference too. @Urigo wrote here that you may replace IonicCLI with AngularCLI in Meteor project referring to Meteor-Ionic2 CLI tutorial but trying to make this work seems to me like finding a treasure without a map.
Can someone from Meteor team confirm what would be the supposed way of doing this right if possible at all and point out to some instructions please? Thanks!
Both ways should be supported but there is work to do and I would love some help.
If someone wants to help me in that work, please feel free to contact me directly
I’ve managed to compile project with ngc using @angular/compiler-cli 4.0.2 and got ngfactory files. However, when using AppModuleNgFactory for bootstrapping, I get this error:
Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
barbatus:angular-compiler is not working for me. Can someone help me out here please?
There is any progress in AoT + meteor?
Unfortunately we couldn’t wait for barbatus-compiler polish so we decided to implement separation of angular from meteor following this: https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
It was painfull but we succeded. We moved our client code to angular project on webpack and added meteor-client-bundle to it so it can communicate with meteor project that is plan backend now. publish-subscribe works fine. It has all the functionalities as before except we have two node processes now. Configuration and webpack setup and solving missing meteor-css was painfull but now we have significant improvements in performance. AOT works as expected in raw angular. There are even more possibilities now when deciding on mobile technologies but even plan cordova project loaded with AOT bundle starts on android in 3 seconds compared to 20 as it was before.
The investment in separation paid off. Don’t be afraid of it. Just dive in and be brave and persitent. If you have questions send me a PM. Good luck!
Kombadsomba - I am looking to follow your lead on this. It would be a great service for you to post a working example of client and server to a repo somewhere so we could benefit from your good work here. I’ve tried to separate, and with some success, but so far, I can’t get an Angular Cli app talking to Meteor backend.
I’ve gone with meteor-client-bundler, splitting the UI away from Meteor, and wholeheartedly recommend it for any UI that isn’t Blaze. I’m building my app out with Angular 4 + Ionic 3 and using Meteor solely as an API.
Meteor is a really poor choice for frontend compilation and the benefits of using a first-class CLI for your frontend are going to far outweigh the work of splitting the code away. Separating the actual hosting of your UI bundle from Meteor’s client output affords you a lot of flexibility with how you’re going to allocate resources. In addition, with Meteor’s heavy React focus I don’t really ever see any hope of high-quality Angular support. Meteor’s base functions work perfectly fine with MCB in Angular 4, and the angular-meteor package provides Observable wrappers for them for easy integration.
You basically just shove the entirety of your Meteor project into an api folder with the ability to import collections, shared code, etc. as needed from your Angular files. You just run your UI with angular-cli (ionic for that framework) and run the Meteor cli separately from its subfolder.
The Whatsapp2 tutorial provides some insight into this process, including setting up Webpack for the Ionic CLI. Angular CLI is quite different, but many of the procedures will be the same.
Thanks estacks. I’ve followed your advice, and I have a demo app up and running already. The only irritation is that I wanted to have the choice in future of reverting i.e. build with either CLI, off a common codebase.
Unfortunately, it seems that the templateUrl and stylesUrl importing syntax is different (ie. meteor expects template: with a string, and styles: with an array of strings. you can’t use templateUrl or stylesUrl. Have you come across this problem?
I just split my meteor app into separate meteor and ionic projects according to the whatsapp tutorial and while I like this approach better I’m running into an issue when trying to build with aot. The aot compiler is looking for .js files under the api/ folder instead of .ts files. I’m guessing it should be looking there at all since it’s all been compiled into meteor-client.js. I must be missing some configuration. Any idea what it could be?
Thanks.
We’ve released angular2-meteor version 0.8.0 to support the latest versions of Angular (4 and 5).
Thanks to this PR from @darkbasic .
Just a note, that we’ve updated this API even though we consider it a deprecated API, and you should probably slowly migrate your data solution to meteor-rxjs.
we’ve also published new angular-compilers package that supports all the features the Angular CLI gives you:
and added a lot of examples with for all those features plus an example with Angular CLI if you want to use it instead of the Meteor CLI:
We’ve also updated all the latest versions including the latest Angular 5 RC and Meteor 1.6.
Please open a new issue if you encountered one.
We’ve updated the Ionic CLI tutorial and in the process of updating the Meteor CLI one.