angular - कोणीय कैश सक्षम के साथ पृष्ठ अद्यतन नहीं करता है




caching iis (2)

मैंने एक कोणीय वेबसाइट बनाई जिसमें एक ही पृष्ठ पर किसी तालिका पर डेटा को कुशल बनाने के लिए "एड" और "डिलीट" फ़ॉर्म शामिल है।

जब मैं इसे स्थानीय रूप से या क्रोम देव कंसोल (अक्षम कैश) के साथ परीक्षण करता हूं, जब मैं कोई नया आइटम जोड़ता हूं या हटा देता हूं, तो तालिका स्वचालित रूप से रीफ्रेश हो जाती है। जब मैं अपने क्लाइंट के उत्पादन सर्वर (आईआईएस सर्वर) पर इसका परीक्षण करता हूं, तो यह केवल क्रोम देव कंसोल के साथ काम करता है। अन्यथा, उन्हें कैश रीफ्रेश करने और पृष्ठ पर परिवर्तन दिखाने के लिए CTRL + F5 का उपयोग करना होगा।

यह घटकों पर कोड है:

  addProduct() {
    this._productsService.addProduct(this.addFormProductItem)
      .subscribe(v => {
        this._productsService.getProducts().subscribe( 
          products => {this.products = products, this.onChangeTable(this.config)}
      );
    });
    this.addmodalWindow.hide();
    return;
  } 


  onChangeTable(config: any, page: any = {
    page: this.page,
    itemsPerPage: this.itemsPerPage
  }): any {
    if (config.filtering) {
      Object.assign(this.config.filtering, config.filtering);
    }
    if (config.sorting) {
      Object.assign(this.config.sorting, config.sorting);
    }
    this.ng2TableData = this.products;
    this.length = this.ng2TableData.length;
    let filteredData = this.changeFilter(this.ng2TableData, this.config);
    let sortedData = this.changeSort(filteredData, this.config);
    this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
    this.length = sortedData.length;
  }

मेरा अनुमान है कि यह या तो कुछ सर्वर विन्यास या वेबपैक कोड से संबंधित है। हालांकि, मैं बाद वाले से परिचित नहीं हूं और मैंने इसे अभी छोड़ दिया क्योंकि यह मेरे द्वारा उपयोग किए जाने वाले शुरुआती पैकेज पर था।

मैंने वेबपैक के साथ एक गिस्ट बनाया क्योंकि यह एक लंबी फाइल है

संपादित करें 1: कुछ अतिरिक्त शोध के बाद, मैंने ऐप के रूट फ़ोल्डर पर web.config फ़ाइल पर निम्नलिखित जोड़ने का प्रयास किया।

<caching enabled="false" enableKernelCache="false">
      <profiles>
         <add extension=".css" policy="DontCache" kernelCachePolicy="DontCache" />
         <add extension=".html" policy="DontCache" kernelCachePolicy="DontCache" />
         <add extension=".js" policy="DontCache" kernelCachePolicy="DontCache" />
      </profiles>
</caching>

हालांकि, मेरे पास अभी भी वही व्यवहार है। देव कंसोल के साथ एक आइटम जोड़ना बंद है, यह तालिका अद्यतन नहीं करता है। लेकिन अगर मेरे पास dev console को कैश खोला गया है और अक्षम किया गया है, तो यह इसे रीफ्रेश की आवश्यकता के बिना अपडेट करता है।

संपादित करें 2: गुप्त विंडो पर काम करना समस्या को ठीक नहीं करता है।

संपादित करें 3: index.html पर मेटा टैग जोड़ना समस्या को ठीक नहीं करता है।

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

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

  getProducts() {
    return this._http.get(this.API + '/products/all')
      .map((response: Response) => <Product[]>response.json().products);
  }

  addProduct(product:Product) {
    if ( this._loggedInGuard.isLoggedIn() ) {
      let token = localStorage.getItem('my.token');
      let body = JSON.stringify(product);
      let headers = new Headers(
         { 'Content-Type': 'application/json',
         'Authorization': 'Bearer ' + token});
      return this._http
      .post(this.API + "/products/store", body, {headers: headers} )
      .map(res => res.json())
      .catch(this._responseService.catchBadResponse)
      .do(() => this._responseService.success('Success. You added a product!'));

    }  
  }

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

एकमात्र समाधान जो मैं पा सकता हूं वह हर बार विंडो को फिर से लोड करना है जब मैं location.reload(true) साथ डेटा पर अद्यतन करता हूं। लेकिन फिर, यह केवल फ़ायरफ़ॉक्स पर काम करता है, न कि क्रोम पर। और मैं स्वीकार नहीं करूंगा कि आपको यह काम करने के लिए एकल पृष्ठ ऐप रखने का एकमात्र कारण छोड़ना होगा।


एएसपी.नेट पृष्ठों के लिए आप कहीं भी कैश नहीं करना चाहते हैं,

HttpContext.Current.Response.Cache.SetCacheability
                            (HttpCacheability.Server);
HttpContext.Current.Response.Cache.SetNoStore();
Response.Cache.SetExpires(DateTime.Now); 
Response.Cache.SetValidUntilExpires(true); 

यह किसी भी कैशिंग प्रॉक्सी सर्वर को बताता है कि केवल सर्वर को पृष्ठ को कैश करने की अनुमति है और सर्वर को कैश नहीं करने के लिए कहता है। कोड की बाद की दो पंक्तियां ब्राउज़र से पूछती हैं कि इसे कैश न करें। उपरोक्त कोड इन तीन शीर्षकों की ओर जाता है:

 Cache-Control:no-cache, no-store
 Pragma:no-cache
 Expires:-1

ब्राउज़र कैशिंग को रोकने के लिए आप क्वेरी स्ट्रिंग में कुछ अद्वितीय भी जोड़ सकते हैं।

.post(this.API + "/products/store?unique=milliseconds", body, {headers: headers} )

एक पूर्णकालिक स्टाम्प या प्रत्येक http कॉल के लिए एक अद्वितीय आईडी वाला पैरामीटर संलग्न करें जिसे आप कैश नहीं करना चाहते हैं। एक चैंप की तरह काम करता है। मैं कोणीय में टेम्पलेट का उपयोग कर एक ही मुद्दा था। मैंने अभी एक http इंटरसेप्टर जोड़ा और प्रत्येक कॉल में टाइमस्टैम्प लगाया और समस्या गायब हो गई।





webpack