Tích hợp ng-bootstrap vào dự án ASP.NET Core JavaScript Services (Angular)

Question

Tôi đang sử dụng ASP.NET Core 2.0's JavaScript Services với Angular và cố gắng tích hợp ng-bootstrap.

Tôi đã cài đặt ng-bootstrap:

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

tôi thêm nó vào 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', 
]; 
... 

tôi thêm NgbModule đến nhập khẩu app.module.shared.ts tôi:

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

tôi làm sạch các giải pháp và chạy:

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

Mọi thứ đều ổn.

Chạy:

c:\...>dotnet run

Cố gắng tải các trang kết quả trong các lỗi sau:

NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject.

này là khá rõ ràng liên quan đến hiển thị trước. Vì vậy, tôi hiện đang cố gắng tạo một mô hình ng-bootstrap chỉ sử dụng các thành phần tôi muốn sử dụng, sẽ không gọi bất kỳ lời hứa nào (hoặc sẽ sử dụng lời hứa giả quyết giải quyết ngay) và không gọi DOM. Điều này sẽ được nhập khẩu trong app.module.server.ts ...

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

... và tiêu chuẩn ...

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

... sẽ được sử dụng trong app.module.browser.ts, thay vì sử dụng tiêu chuẩn trong app.module.shared.ts.

Đây sẽ tất nhiên cả hai được nhập khẩu trong app module tương ứng của họ ...

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

Vì vậy, câu hỏi của tôi là, tôi thiếu cái gì? Có cách nào tốt hơn để đối phó với điều này ngoài việc tạo ra một mô hình giống như mô tả ở trên không?

Answer 1

Bạn có thể thêm Bootstrap 4 đến dự án kiễu góc

Install bootstrap Alpha release using 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" 
],