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?

Sr

my guess is that since you haven't used any of the ng-bootstrap elements the treeshaking is dropping it and your server side rendering fails. Try to add something and see if the error will change – Varietal

@Varietal I am using the carousel. NgbModule shows up in ClientApp/dist/vendor.js. – Sr

I think if you going to use it for share the functionality you don't have to use it with NgbModule.forRoot(), just NgbModule and then in every app you are going to add it like this: NgbModule.forRoot() – Knighterrantry

have you tried putting in [CUSTOM_ELEMENTS_SCHEMA] under schemas list for app.module.server.ts and just NgbModule is good under imports don't have to use forRoot() i guess..... that solved the issue for us – Levitation

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"
],

Ballplayer