asp.net-core
Angular2 और .Net कोर

एक कोणीय 2 हैलो वर्ल्ड के लिए त्वरित ट्यूटोरियल! दृश्य स्टूडियो 2015 में .Net कोर के साथ ऐप

कदम:

1. खाली करें .Net कोर वेब ऐप बनाएं:

2. Wwwroot पर जाएं, और एक सामान्य HTML पेज बनाएं, जिसे Index.html कहा जाता है:

3. स्थिर फ़ाइलों को स्वीकार करने के लिए Startup.cs को कॉन्फ़िगर करें (इसके लिए "Microsoft.AspNetCore.StaticFiles": "1.0.0" लाइब्रेरी को "project.json" फ़ाइल में जोड़ना होगा):

4. NPN फ़ाइल जोड़ें:

   • WebUi प्रोजेक्ट पर राइट क्लिक करें और NPN कॉन्फ़िगरेशन फ़ाइल (package.json) जोड़ें:

   • पैकेजों के अंतिम संस्करणों की पुष्टि करें:

     नोट: यदि दृश्य स्टूडियो पैकेजों के संस्करणों का पता नहीं लगाता है (सभी पैकेजों की जांच करें, क्योंकि उनमें से कुछ संस्करण दिखाते हैं, और कुछ अन्य नहीं करते हैं), ऐसा इसलिए हो सकता है क्योंकि दृश्य स्टूडियो में आने वाला नोड संस्करण सही ढंग से काम नहीं कर रहा है , इसलिए इसे संभवतः नोड जेएस को बाहरी रूप से स्थापित करना होगा और फिर उस इंस्टॉलेशन को विज़ुअल स्टूडियो के साथ जोड़ना होगा।

     मैं। नोड js डाउनलोड और स्थापित करें : https://nodejs.org/es/download/

     ii। दृश्य स्टूडियो के साथ स्थापना को लिंक करें: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii। (वैकल्पिक) package.json को बचाने के बाद, यह प्रोजेक्ट में निर्भरता को स्थापित करेगा, यदि नहीं, तो पैकेज.json फ़ाइल के समान स्थान से कमांड प्रॉम्प्ट का उपयोग करके "npm इंस्टॉल" चलाएं।

     नोट: "ओपन कमांड लाइन" स्थापित करने के लिए अनुशंसित, एक एक्सटेंशन जिसे विज़ुअल स्टूडियो में जोड़ा जा सकता है:

5. टाइपस्क्रिप्ट जोड़ें:

   • WebUi प्रोजेक्ट के अंदर एक TsScript फोल्डर बनाएं, सिर्फ संगठन के लिए (टाइपस्क्रिप्ट ब्राउज़र में नहीं जाएंगे, उन्हें एक सामान्य JS फाइल में ट्रांसप्लान्ट किया जाएगा, और यह JS फाइल एक है जिसे रुल का उपयोग करके wwwroot foder में जाना जाएगा, यह बाद में समझाया जाएगा):

   • उस फ़ोल्डर के अंदर "टाइपस्क्रिप्ट JSON कॉन्फ़िगरेशन फ़ाइल" जोड़ें (tsconfig.json): और अगला कोड जोड़ें:

     

   • WebUi Project के मूल में, टाइपिंग नामक एक नई फ़ाइल जोड़ें। json: और अगला कोड जोड़ें:

   • वेब प्रोजेक्ट रूट में एक कमांड लाइन खोलें और "टाइपिंग इंस्टॉल" निष्पादित करें, यह एक टाइपिंग फ़ोल्डर बनाएगा (इसके लिए "ओपन कमांड लाइन की आवश्यकता है" चरण 4 के अंदर नोट में एक वैकल्पिक चरण के रूप में समझाया गया है, संख्या iii)।

6. फ़ाइलों को स्थानांतरित करने के लिए गल्प जोड़ें:

   • वेब प्रोजेक्ट के मूल में "गुल विन्यास कॉन्फ़िगरेशन फ़ाइल" (gulpfile.js) जोड़ें:
   • कोड जोड़ें:

7. "TsScripts" फ़ोल्डर के अंदर कोणीय 2 बूटस्ट्रैपिंग फ़ाइलें जोड़ें:

   app.component.ts

   app.module.ts

   main.ts

8. Wwwroot के अंदर, अगली फ़ाइल संरचना बनाएँ:

9. स्क्रिप्ट फ़ोल्डर के अंदर (लेकिन ऐप के बाहर), systemjs.config.js जोड़ें: और अगला कोड जोड़ें:

10. Wwwroot में स्क्रिप्ट उत्पन्न करने के लिए गुल टास्क को निष्पादित करें।

    • Gulpfile.js पर राइट क्लिक करें
    • टास्क रनर एक्सप्लोरर मैं। यदि कार्य लोड नहीं किए गए हैं ("लोड करने में विफल। आउटपुट विंडो देखें") आउटपुट विंडो पर जाएं और त्रुटियों पर एक नज़र डालें, अधिकांश समय gulp फ़ाइल में वाक्यविन्यास त्रुटियां हैं।
    • राइट "डिफ़ॉल्ट" कार्य और "रन" पर क्लिक करें (यह थोड़ी देर लगेगा, और पुष्टिकरण संदेश बहुत सटीक नहीं हैं, यह इसे समाप्त दिखाता है लेकिन प्रक्रिया अभी भी चल रही है, इसे ध्यान में रखें):

11. Index.html को संशोधित करें जैसे:

12. अब दौड़ो और आनंद लो।

    टिप्पणियाँ:

    • यदि टाइपस्क्रिप्ट के साथ संकलन त्रुटियां हैं, उदाहरण के लिए "टाइपस्क्रिप्ट वर्चुअल प्रोजेक्ट", तो यह एक संकेतक है कि विज़ुअल स्टूडियो के लिए टाइपस्क्रिप्ट संस्करण को "पैकेज.जॉन" में चयनित संस्करण के अनुसार अपडेट नहीं किया जाता है, यदि ऐसा होता है तो कृपया इंस्टॉल करें : https://www.microsoft.com/en-us/download/details.aspx?id=48593

संदर्भ:

• डेबोरा कुर्ता का "कोणीय 2: आरंभ करना"

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• कोणीय 2 आधिकारिक दस्तावेज:

  https://angular.io/

• मिथुन पट्टणकर के लेख:

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

.NET कोर प्रोजेक्ट में कोणीय 2 घटक उत्पन्न करते समय अपेक्षित त्रुटियाँ (संस्करण 0.8.3)

.NET कोर प्रोजेक्ट में नए कोणीय 2 घटक बनाते समय, आप निम्न त्रुटियों (संस्करण 0.8.3 के अनुसार) में चल सकते हैं:

Error locating module for declaration
        SilentError: No module files found

या

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[समाधान]

1. App.module.client.ts को app.client.module.ts का नाम दें

2. खुले app.client.module.ts: 3 डॉट्स "..." के साथ घोषणा को पूर्व निर्धारित करें और कोष्ठक में घोषणा को लपेटें।

   उदाहरण के लिए: [...sharedConfig.declarations, <MyComponent>]

3. ओपन बूट-client.ts: नए app.client.module संदर्भ का उपयोग करने के लिए अपने आयात को अपडेट करें।

   उदाहरण के लिए: import { AppModule } from './app/app.client.module';

4. अब नया कंपोनेंट जेनरेट करने की कोशिश करें: ng g component my-component

[व्याख्या]

कोणीय सीएलआई आपके प्रोजेक्ट में app.module.ts नाम की एक फ़ाइल की तलाश करता है, और घटक को आयात करने के लिए घोषणाओं की संपत्ति के लिए एक संदर्भ खोजने की कोशिश करता है। यह एक सरणी होना चाहिए (जैसे कि ShareConfig.declarations है), लेकिन परिवर्तन लागू नहीं होते हैं

[स्रोत]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (खंड 3.33 व्याख्यान योगदानकर्ता ब्रायन गार्ज़न)