Angular-Meteor Tutorial [Angular2 and ng2-bootstrap package]

[ackzell]

Hi there,

I am following the Socially tutorial for Angular2 and I got to the part where bootstrap is being added: (here)).

I searched a little more and found that there is actually a package for atmosphere that enables a project called ng2-bootstrap to add bootstrap directives (like the angular-bootstrap-ui project, but for ng2).

So I went ahead and installed it, added the file to the tsconfig.json files key and got an Alert directive working in my app without any issue.

The problem I’ve been trying to solve is using the DATEPICKER_DIRECTIVES as in the example code for the ng2-bootstrap documentation.

Right now I get this exception on my browser’s console:
EXCEPTION: Unexpected directive value 'undefined' on the View of component 'PartiesList'

I googled for this exception very thoroughly but I don’t think I understand the underlying issue since some solutions were to change the way components depended on each other or modifying the definition files as far as I understood.

Can anyone give a hand here?

Thanks!

[ackzell]

So, I am wondering if it would have anything to do with this part of the documentation for ng2-bootstrap:

As for now datepicker is using moment.js to format date, so please update system.js config to contain mapping:

<!-- index.html -->
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment/moment.js'
    }
  });

I added the moment package to my project but maybe the datepicker isn’t able to see it?

I don’t really understand very well how System.js plays a role in this setup presented on the tutorial.

[orlaqp]

Were you able to figure this one out? I am having exactly the same issue.

[ackzell]

Not yet, unfortunately. I looked for hours and tried to come up with a solution, but didn’t make it work. So, I had to pause that in favor of learning other things. =(

Please let me know if you find something.

[Hongbo_Miao]

@orlaqp @ackzell this package on Atmosphere does not include date picker, that is why you cannot use it.

Right now Meteor 1.3 comes out, so try to include it from NPM.

[Hongbo_Miao]

@orlaqp @ackzell I have succeed using ng2-bootstrap from NPM, I met a weird problem before, it may help you.

[SOLVED] How to use ng2-bootstrap in angular2-meteor1.3 project?

For a new project, I have run those in terminal npm init meteor add angular2-compilers meteor remove blaze-html-templates meteor npm install --save angular2-meteor meteor npm install --save meteor-node-stubs meteor npm install --save angular2-meteor-auto-bootstrap meteor npm install --save bootstrap4-webpack-package meteor npm install --save ng2-bootstrap import 'reflect-metadata'; import 'zone.js/dist/zone'; import 'bootstrap4-webpack-package'; import { Component } from 'angular2/cor…

[ackzell]

Thank you kindly @Hongbo_Miao!

I’ll be giving A2 in Meteor a shot again here soon.

Cheers!