title: Integrating ng-bootstrap in to ASP.NET Core JavaScript Services (Angular) project
body: <p>I'm using <a href="https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/" rel="noreferrer">ASP.NET Core 2.0's JavaScript Services</a> with <a href="https://angular.io/" rel="noreferrer">Angular</a> and trying to integrate <a href="https://ng-bootstrap.github.io/#/home" rel="noreferrer">ng-bootstrap</a>.</p>
  
  <p>I installed <code>ng-bootstrap</code>:</p>
  
  <blockquote>
    <p><code>npm install --save @ng-bootstrap/ng-bootstrap</code></p>
  </blockquote>
  
  <p>I added it to <code>webpack.config.vendor.js</code>:</p>
  
  <pre><code>...
  const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@ng-bootstrap/ng-bootstrap',  // &lt;-- down here
      'zone.js',
  ];
  ...
  </code></pre>
  
  <p>I added <code>NgbModule</code> to the imports of my <code>app.module.shared.ts</code>:</p>
  
  <pre><code>...
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  ...
  @NgModule({
      declarations: [
          AppComponent,
          ...
      ],
      imports: [
          CommonModule,
          NgbModule.forRoot(),  // &lt;-- this guy
          HttpModule,
          FormsModule,
          RouterModule.forRoot([
              ...
          ])
      ]
  })
  export class AppModuleShared {
  }
  </code></pre>
  
  <p>I clean the solution and run:</p>
  
  <blockquote>
    <p><code>c:\...&gt;webpack &amp;&amp; webpack --config webpack.config.vendor.js</code></p>
  </blockquote>
  
  <p>Everything builds fine.</p>
  
  <p>Running:</p>
  
  <blockquote>
    <p><code>c:\...&gt;dotnet run</code></p>
  </blockquote>
  
  <p>Attempting to load the page results in the following error:</p>
  
  <blockquote>
    <p>NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject.</p>
  </blockquote>
  
  <p>This is quite obviously related to prerendering.  So I am currently attempting to create a mockup of <code>ng-bootstrap</code> using only the components I want to use, which will not invoke any promises (or will use dummy promises that resolve immediately), and does not invoke the DOM.  This will be imported in <code>app.module.server.ts</code>...</p>
  
  <pre><code>import { NgbModule } from './components/ng-bootstrap-mockup/ng-bootstrap'
  </code></pre>
  
  <p>...and <em>the standard</em>...</p>
  
  <pre><code>import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
  </code></pre>
  
  <p>...will be used in <code>app.module.browser.ts</code>, <strong>instead of using <em>the standard</em> in <code>app.module.shared.ts</code></strong>.</p>
  
  <p>These will of course both be imported in their respective <code>app</code> modules...</p>
  
  <pre><code>@NgModule({
      ...
      imports: [
          NgbModule.forRoot(),
          ...
      ]
  })
  ...
  </code></pre>
  
  <p>So my question is, am I missing something?  Is there a better way to deal with this other than to create a mockup like the one I described above?</p>