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

Я использую 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, используя только те компоненты, которые я хочу использовать, которые не будут вызывать никаких promises (или будут немедленно использовать фиктивный promises) и не будут вызывать 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(),
        ...
    ]
})
...

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

Ответы

Ответ 1

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

Установка бутстрапа Alpha release с использованием 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 [email protected]
//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"
],