Can't load @ng-bootstrap/ng-bootstrap with ang

2019-05-23 05:28发布

问题:

I'm trying to use @ng-bootstrap/ng-bootstrap with angular and electron, using gulp.

this is my renderer.ts:

    /**
 * Angular Module declaration
 */

let BrowserModule = require('@angular/platform-browser').BrowserModule;
let UpgradeModule = require('@angular/upgrade/static').UpgradeModule;
let NgbModule = require('@ng-bootstrap/ng-bootstrap').NgbModule;
let NgModule = require('@angular/core').NgModule;

let platformBrowserDynamic = require('@angular/platform-browser-dynamic').platformBrowserDynamic;
require('zone.js');

@NgModule({
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    UpgradeModule
  ]
})

export class AppModule {
  constructor() { }

  ngDoBootstrap() {
  }
}

let angular = require('angular');

// When DOM is loaded
angular.element(document).ready(function () {
  // start up the Angular module "AppModule" in AngularJS
  // platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop'})
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then((platformRef) => {
      const upgrade = platformRef.injector.get(UpgradeModule);
      upgrade.bootstrap(document, ['app']);
    });
});

And my index.html:

<!DOCTYPE html> <html>   <body>
<script>
  require('./dist/renderer.js')
</script>

<button ngbTooltip="hello">Hello</button>   </body> </html>

I'm getting this error when trying to load NgbModules

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

What am I loosing here?

PD: I'm not using NgbAlert anywhere on my code.

Error:

Uncaught Error: Can't resolve all parameters for NgbAlert: (?). at syntaxError (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:301) at CompileMetadataResolver._getDependenciesMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10893) at CompileMetadataResolver._getTypeMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10786) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10405) at CompileMetadataResolver._getEntryComponentMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10989) at C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10638 at Array.map () at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10638) at CompileMetadataResolver.getNgModuleSummary (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10464) at C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10551

回答1:

Finally I could fix it!

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.

I hope this could help anyone else.