Интеграция ng-bootstrap в проект ASP.NET Core JavaScript Services (Angular)

Question

Я использую ASP.NET Core 2.0 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',
];
...

я добавил NgbModule к импорту моего 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 {
}

Я очищаю решение и запускаю:

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(),
        ...
    ]
})
...

Итак, мой вопрос, я что-то упустил? Есть ли лучший способ справиться с этим, кроме создания макета, подобного тому, который я описал выше?

Answer 1

Вы можете добавить Bootstrap 4 в проект Angular

Установите загрузочную версию Alpha, используя NPM:

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