Integrating ng-bootstrap in to ASP.NET Core JavaScript Services (Angular) project

Question

I'm using ASP.NET Core 2.0's JavaScript Services with Angular and trying to integrate ng-bootstrap.

I installed ng-bootstrap:

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

I added it to webpack.config.vendor.js:

...
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',  // <-- down here
    'zone.js',
];
...

I added NgbModule to the imports of my app.module.shared.ts:

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        CommonModule,
        NgbModule.forRoot(),  // <-- this guy
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            ...
        ])
    ]
})
export class AppModuleShared {
}

I clean the solution and run:

c:\...>webpack && webpack --config webpack.config.vendor.js

Everything builds fine.

Running:

c:\...>dotnet run

Attempting to load the page results in the following error:

NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject.

This is quite obviously related to prerendering. So I am currently attempting to create a mockup of ng-bootstrap 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 app.module.server.ts...

import { NgbModule } from './components/ng-bootstrap-mockup/ng-bootstrap'

...and the standard...

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'

...will be used in app.module.browser.ts, instead of using the standard in app.module.shared.ts.

These will of course both be imported in their respective app modules...

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

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?

Answer 1

You Can Add Bootstrap 4 to Angular project

Install bootstrap Alpha release using NPM:

npm install --save [email protected]
//We chose a specific version to ensure future releases doesn’t break the sample. Optionally, run the following command to install the latest pre-release package.

npm install –save bootstrap@next
//Once the package is downloaded, add Bootstrap references in .angular-cli.json.

//Modify styles configuration to add Bootstrap CSS

styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],

//Modify scripts configuration to add jQuery, Bootstrap and Tether JS files.

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/tether/dist/js/tether.min.js",        
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],