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

angular
1

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/core';
import { bootstrap } from 'angular2/platform/browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'app',
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`,
  directives: [Alert]
})
class App { }
bootstrap(App);

Right now bootstrap4-webpack-package makes Bootstrap 4 works, but ng2-bootstrap still not works.

Since I am using Bootstrap 4, so I also tried to add

import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap/ng2-bootstrap';
Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

But still not works.

It shows the error:

EXCEPTION: No Directive annotation found on Alert
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on Alert

I am not sure whether this is related with this issue.

How can I use ng2-bootstrap? Thanks

2

At last I found it is because of my NPM problem. Because the code can run well on other people’s machine.

I uninstall my NPM, and install the new v5.10.1, the problem fixes!

Check here

Hope this can help people who met similar weird problem.