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?
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"
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With