11

करने के लिए मैं Angular साथ ASP.NET Core 2.0's JavaScript Services उपयोग कर रहा हूँ और ng-bootstrap एकीकृत करने की कोशिश एनजी-बूटस्ट्रैप का घालमेल।ASP.NET कोर जावास्क्रिप्ट सेवा (कोणीय) परियोजना

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

मैं इसे जोड़ा webpack.config.vendor.js लिए:

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

मैं समाधान स्वच्छ और:

... 
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 जोड़ा

मैं ng-bootstrap स्थापित रन:

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

सब कुछ ठीक बनाता है।

रनिंग:

c:\...>dotnet run

निम्न त्रुटि में पेज परिणामों लोड करने के प्रयास:

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

यह काफी स्पष्ट रूप से प्रीरेंडरिंग से संबंधित है। इसलिए मैं वर्तमान में केवल उन घटकों का उपयोग करके ng-bootstrap का नकली बनाने का प्रयास कर रहा हूं, जो कि मैं उपयोग करना चाहता हूं, जो किसी भी वादे का आह्वान नहीं करेगा (या तत्काल हल करने वाले डमी वादे का उपयोग करेगा), और डोम का आह्वान नहीं करता है। यह 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(), 
     ... 
    ] 
}) 
... 

तो मेरे सवाल है, मैं कुछ याद आ रही है है? क्या ऊपर वर्णित एक जैसा मॉकअप बनाने के अलावा इस से निपटने का कोई बेहतर तरीका है?

+0

मेरा अनुमान है कि आप एनजी-बूटस्ट्रैप तत्वों treeshaking यह और अपने सर्वर साइड प्रतिपादन गिरती है के किसी भी उपयोग नहीं किया है के बाद से विफल रहता है। कुछ जोड़ने का प्रयास करें और देखें कि त्रुटि – Yaser

+0

@Yaser बदल जाएगी, मैं कैरोसेल का उपयोग कर रहा हूं। NgbModule 'ClientApp/dist/vendor.js' में दिखाई देता है। –

+1

मुझे लगता है कि यदि आप इसे साझा करने के लिए उपयोग करने जा रहे हैं तो कार्यक्षमता को आपको 'NgbModule.forRoot()', केवल 'NgbModule'' के साथ उपयोग करने की आवश्यकता नहीं है और फिर प्रत्येक ऐप में आप इसे इस तरह जोड़ना चाहते हैं: 'NgbModule .forRoot() ' –

उत्तर

1

आप कोणीय परियोजना के लिए बूटस्ट्रैप 4 जोड़े सकते हैं

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