दृश्य स्टूडियो एकल पृष्ठ अनुप्रयोग एकीकरण

Question

प्रौद्योगिकी:

• विजुअल स्टूडियो 2017
• Asp.Net कोर टूलींग 1.1
• .Net Framework 4.6.2

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

• Microsoft.AspNetCore.SpaServices
• Microsoft.AspNetCore.NodeServices

आप के माध्यम से जाने के लिए और यहां तक ​​कि एक विश्लेषण के बाद कुछ टेम्पलेट्स, आप अपने समाधान एक्सप्लोरर में नोटिस करेंगे, ClientApp नामक एक निर्देशिका। यह कॉन्फ़िगर किया गया है, और वेबपैक के माध्यम से मार्गित किया गया है।

Startup.cs के अंदर जहां समस्या स्वयं प्रकट होती है।

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
    { 
     loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
     loggerFactory.AddDebug(); 

     if (env.IsDevelopment()) 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 
      { 
       HotModuleReplacement = true 
      }); 
     } 
     else 
     { 
      app.UseExceptionHandler("/Home/Error"); 
     } 

     app.UseStaticFiles(); 

     app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Home}/{action=Index}/{id?}"); 

      routes.MapSpaFallbackRoute(
       name: "spa-fallback", 
       defaults: new { controller = "Home", action = "Index" }); 
     }); 
    } 

हमारे अनुरोध के अंदर, हमारे पास हमारे एमवीसी फ्रेमवर्क में कुछ रूटिंग है।

प्रश्न, हमें इस मार्ग को निर्दिष्ट करने की आवश्यकता क्यों है? यदि हम बस app.UseDefaultFiles() और app.UseStaticFiles() का उपयोग करते हैं और हमारे सूचकांक को हमारे wwwroot में निर्दिष्ट किया गया है। हमारे ग्राहक पक्ष राउटर हमेशा वापस आ जाएगा। तो क्यों न हम इसे इस तरह नहीं करते:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
    { 
     loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
     loggerFactory.AddDebug(); 

     if (env.IsDevelopment()) 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 
      { 
       HotModuleReplacement = true 
      }); 
     } 
     else 
     { 
      app.UseExceptionHandler("/Home/Error"); 
     } 

     app.UseDefaultFiles(); 
     app.UseStaticFiles(); 
    } 

मैं समझता हूँ कि हमारे wwwroot में सीधे आइटम संकुचित नहीं कर रहे हैं, यह भी सुरक्षा रिसाव सकता है, लेकिन एक तरफ उन दो कमियां से क्यों इस मार्ग का उपयोग नहीं अपने सूचकांक सुनिश्चित करने के लिए और क्लाइंट साइड राउटर हमेशा वापस नहीं आते हैं?

मैं विशेष रूप से MVC मजबूर कर हमेशा एक Home/Index या UseDefaultFiles()/UseStaticFiles() वापस जाने के लिए की अवधारणा के बारे में पूछ रहा हूँ। मुझे क्या याद आ रहा है, हमें इसे वापस करने के लिए एमवीसी को मजबूर करने के लिए क्यों कहा जा रहा है?

महत्वपूर्ण: मूल रूप से इस मुद्दे को निशाना बनाया, कैसे मजबूर करने के लिए सूचकांक तो हमारे ग्राहक के पक्ष ढांचे के रूटर एक विशेष दृश्य राज्य लौटने बैकएंड बनाम परिवर्तन से निपटने है लौटा दी है।

Answer 1

यह करने की आवश्यकता होगी ऐसा लगता है कि हमने जो कुछ भी देखा है, वह पहले से ही अच्छी तरह से पैक किया गया है।

// allow returning of physical files on the file system of the web root and it's sub dirs 
    app.UseDefaultFiles(); 
    app.UseStaticFiles(); 

    // map MVC routes to controller actions when a static file cannot be found 
    app.UseMvc(routes => 
    { 
     // default routing convention for mapping "most situations" 
     routes.MapRoute(
      name: "default", 
      template: "{controller=Home}/{action=Index}/{id?}"); 

     // fallback routing 
     routes.MapSpaFallbackRoute(
      name: "spa-fallback", 
      defaults: new { controller = "Home", action = "Index" }); 
    }); 

टिप्पणियों के अनुसार ...

यह वास्तव में एक वापस आने के लिए एक स्थिर फ़ाइल मौजूद नहीं चाहिए। लेकिन, अगर यह wwwroot में एक index.htm शामिल करता है, यह तकनीकी रूप से कभी नहीं उस मार्ग पर अमल होगा जब तक कि विशेष रूप से शीर्ष लेख जानकारी पारित हो जाता है

Answer 2

ये एसपीए टेम्पलेट्स सभी न्यूनतम एएसपी.नेट कोर एमवीसी सर्वर नींव का उपयोग करते हैं। Index.cshtml से एचटीएमएल मार्कअप उत्पन्न करने के लिए हमें एमवीसी के लिए डिफ़ॉल्ट मार्ग की आवश्यकता है।

मुझे टेम्पलेट के wwwroot/dist फ़ोल्डर में जेनरेट की जाने वाली कोई भी सादा HTML फ़ाइलें नहीं दिखाई देती हैं। तो app.UserDefaultFiles() पर जाने के लिए Index.html नहीं है।

मैं अनुमान लगा सकता हूं कि अगर कोई मल्टी-पेज एसपीए एप्लिकेशन (ऑक्सी-मॉरॉन) के लिए अधिक नियंत्रक/क्रिया/दृश्य को शामिल करने का निर्णय लेता है तो एमवीसी मार्ग भी हो सकते हैं; या बैक एंड वीपी एपीआई के साथ शुरू करने के लिए ...?

मैं MapSpaFallbackRoute से परिचित नहीं हूं, लेकिन यह एसपीए द्वारा कवर न किए गए कुछ मार्गों के लिए कैच-ऑल या कैच-कुछ के रूप में कार्य करता है। स्रोत कोड देखें: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Routing/SpaRouteExtensions.cs

बस समग्र होने के लिए, कि वहाँ स्टार्टर टेम्पलेट्स और एक कोणीय हैं अगर हम सर्वर-कम, स्थिर-फ़ाइल-केवल, हो की सेवा यह से एक CDN- करना चाहते हैं का उल्लेख करते हैं बूट करने के लिए CLI:

https://github.com/AngularClass/angular2-webpack-starter

https://github.com/angular/angular2-seed

https://cli.angular.io/

लेकिन, इन स्थिर/MVC-कम जावास्क्रिप्ट क्षुधा की मेजबानी कर रहे हैं आईआईएस में, उन्हें कम से कम रूटिंग सेटअप के साथ web.config की आवश्यकता होगी। देखें:

https://github.com/angular/angular/issues/11046

संपादित करें:

एक और कारण हो सकता है कि कई लोगों को इन परियोजनाओं में वेब एपीआई का उपयोग किया जाएगा, और उस के लिए हम अभी भी app.UseMvc();