Uncaught Error: Can't resolve all parameters for NgbAlert with angular2-meteor and ng-bootstrap

Question

I'm running a meteor project using angular as the front end and I can't seem to figure out how to get @ng-bootstrap/ng-bootstrap to import into my project correctly. Here is my setup...

Meteor Version: 1.6, Angular Version: 5.1.3, @ng-bootstrap/bootstrap: 1.0.0-beta.9, Bootstrap: 4.0.0 beta 3 (CSS through CDN)

client/app/app.module.ts: (cut down version)

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent} from './app-component';

@NgModule({
    imports: [OtherModules, NgbModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
...

client/main.ts:

import '@ng-bootstrap/ng-bootstrap';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Meteor } from 'meteor/meteor';
import { AppModule } from './app/app.module';

Meteor.startup(() => {
  platformBrowserDynamic().bootstrapModule(AppModule);
});

I can't figure out why the module fails to import. I'm sure it's a simple problem that I just can't figure out. Thank you for your help!

The Full Error:

Can't resolve all parameters for NgbAlert: (?).
    at syntaxError (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:49950)
    at CompileMetadataResolver._getDependenciesMetadata (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:65156)
    at CompileMetadataResolver._getTypeMetadata (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64991)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64477)
    at CompileMetadataResolver._getEntryComponentMetadata (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:65304)
    at modules.js?hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64774
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64774)
    at CompileMetadataResolver.getNgModuleSummary (modules.js?
hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64589)
    at modules.js?hash=677f7440cc3c0fd0f024fe4055f104c52a9d1865:64687

Answer 1

I dodn't see how you are including the NgbAlert entity itself in your code... Does it look like –

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdAlertBasic } from './alert-basic'; // this

@NgModule({
    imports: [OtherModules, NgbModule.forRoot()],
    declarations: [App, NgbdAlertBasic] // and this
    // ...
}) 

? Full example could be obtained here. Each ng-bootstrap entity you are going to use in your App needs to be included in your @NgModule "declarations". If this doesn't help, you need to update your post and show the exact code that produces your error.

---

Update. Per official angular-meteor tutorial:

Meteor supports NPM packages (starting from 1.3)... a file named package.json was created - this file contains the project's npm dependencies... To install the current project dependencies, type in the command line npm install.

So, in addition to NgModule changes I put above, the ng-bootstrap package needs to be installed via npm:

npm install --save @ng-bootstrap/ng-bootstrap

Answer 2

The solution that I came to was to enable AOT. The issue seems to pop up in the Angular JIT code, but it's able to properly handle the code if the Meteor code is pre-compiled.

I posted a similar question hoping that I might be able to find a solution. Unfortunately, it was just downvoted, sooo...not quite successful. But I kept digging and found the AOT solution. Hopefully someone will be able to explain why this works and possibly help us to find the root cause!

Answer 3

I posted a similar error here Can't load @ng-bootstrap/ng-bootstrap with angular with a solution I've found after several days beating my head against the wall...

Edit: Added answer

I added require('reflect-metadata'); on top of my renderer.ts .

require('reflect-metadata');
let BrowserModule = require('@angular/platform-browser').BrowserModule;
let UpgradeModule = require('@angular/upgrade/static').UpgradeModule;
let NgbModule = require('@ng-bootstrap/ng-bootstrap').NgbModule;
Placing it somewhere else doesn't make it work.

After some investigation, I came with that the problem was caused due to a reflection error within the JIT compiler when trying to load ng-bootstrap modules.