将 ng-bootstrap 集成到 ASP.NET Core JavaScript Services (Angular) 项目中答案

【问题标题】：Integrating ng-bootstrap in to ASP.NET Core JavaScript Services (Angular) project将 ng-bootstrap 集成到 ASP.NET Core JavaScript Services (Angular) 项目中
【发布时间】：2018-03-15 03:31:43
【问题描述】：

我正在使用 ASP.NET Core 2.0's JavaScript Services 和 Angular 并尝试集成 ng-bootstrap。

我安装了ng-bootstrap：

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

我添加到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',
];
...

我在 app.module.shared.ts 的导入中添加了 NgbModule：

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

我清理解决方案并运行：

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

一切正常。

跑步：

c:\...>dotnet run

尝试加载页面会导致以下错误：

NodeInvocationException：预渲染在 30000 毫秒后超时，因为“ClientApp/dist/main-server”中的引导函数返回了一个未解析或拒绝的承诺。

这显然与预渲染有关。因此，我目前正在尝试仅使用我想要使用的组件创建ng-bootstrap 的模型，它不会调用任何承诺（或将使用立即解析的虚拟承诺），并且不会调用 DOM。这将被导入app.module.server.ts...

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

...和标准...

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

...将在app.module.browser.ts 中使用，而不是在app.module.shared.ts 中使用标准。

这些当然都会被导入到各自的 app 模块中...

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

所以我的问题是，我错过了什么吗？除了像我上面描述的那样创建一个模型之外，还有更好的方法来处理这个问题吗？

【问题讨论】：

我的猜测是，由于您没有使用任何 ng-bootstrap 元素，因此 treeshaking 正在丢弃它并且您的服务器端渲染失败。尝试添加一些东西，看看错误是否会改变
@Yaser 我正在使用轮播。 NgbModule 出现在ClientApp/dist/vendor.js。
我认为如果你打算用它来分享你不必使用NgbModule.forRoot()的功能，只需NgbModule，然后在每个应用程序中你都会像这样添加它：NgbModule.forRoot()
您是否尝试过将 [CUSTOM_ELEMENTS_SCHEMA] 放在 app.module.server.ts 的模式列表下，并且仅 NgbModule 在导入下很好，我猜不必使用 forRoot() .....为我们解决了这个问题

标签： angular asp.net-core ng-bootstrap asp.net-core-2.0 asp-net-core-spa-services

【解决方案1】：

您可以将 Bootstrap 4 添加到 Angular 项目中

使用 NPM 安装 bootstrap Alpha 版本：

npm install --save bootstrap@4.0.0-alpha.6
//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"
],

【讨论】：