Search code examples
angularmeteorng-bootstrapangular-meteor

Can't find a datepicker that plays nicely with angular-meteor

I've tried to add a bunch of different datepicker libraries to my project:

  • Meteor 1.7
  • Angular 6
  • Bootstrap 4

For most of the packages that are intended for Angular I get an error during import on startup. The error normally looks similar. Here is the exact error from ng-bootstrap:

Uncaught Error: Can't resolve all parameters for NgbAlert: (?).

In the case of that error I have not included an NgbAlert anywhere, it's solely from adding NgbModule.forRoot() so don't let the alert confuse you, the issue definitely has something to do with importing the module.

I've tried:

  • ng-pick-datetime
  • Ngx-Bootstrap
  • ng-bootstrap
  • and some others

Any suggestions would be greatly appreciated!

Solution

  • Semi-Solution

    Set AOT=1 in meteor environment variables.

    Discussion

    I was able to get ng-bootstrap working by sym-linking the library (to ensure that it is transpiled) and then building Meteor with AOT enabled.

    I narrowed down the original failure to an area in the Angular JIT compiler code. I really don't know a ton about how Angular-Meteor's angular-compiler code works, in relation to Angular's normal compile flow, so I can't really get to the root of the problem. If anyone can provide a lower level explanation, I'd really appreciate it!

    Update

    In a different, but similar question a better semi-solution was provided by ironmanu on this question. It's still not a perfect solution but it's a usable bandaid.

    The solution is to add require('reflect-metadata'); to the top of the module imports in app.module.ts. This solves the issue during JIT. I'm not sure why the Angular compiler doesn't inherently take care of this issue, but this does the trick!