angular2 router title




각도가 캐시를 사용하는 페이지를 업데이트하지 않습니다. (2)

나는 동일한 페이지의 테이블에있는 데이터를 조작하기 위해 "추가"와 "삭제"양식을 포함하는 각진 웹 사이트를 만들었습니다.

로컬 또는 Chrome Dev Console (캐시 사용 중지됨)으로 테스트 할 때 새 항목을 추가하거나 삭제할 때 테이블이 자동으로 새로 고침됩니다. 내 클라이언트의 프로덕션 서버 (IIS 서버)에서 테스트하면 Chrome 개발자 콘솔이 열리는 경우에만 작동합니다. 그렇지 않으면 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;
  }

내 추측은 일부 서버 구성이나 webpack 코드와 관련이 있다는 것입니다. 그러나, 나는 후자에 익숙하지 않고 나는 그것을 사용했던 시작 패키지에 그대로두고 나갔다.

긴 파일이므로 webpack을 사용하여 요지를 만들었습니다 .

편집 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에 콘솔을 열고 캐시를 사용하지 않으면 새로 고침 필요없이 업데이 트됩니다.

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) 데이터를 업데이트 할 때마다 창을 다시로드하는 것입니다. 그러나 다시 말하지만, Firefox에서만 작동하며 Chrome에서는 작동하지 않습니다. 그리고 단일 페이지 응용 프로그램을 사용하는 유일한 이유를 포기해야한다는 사실을 인정하지 않습니다.


ASP.NET 페이지의 경우 아무 데서나 캐시하지 않으려면,

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

이는 모든 캐싱 프록시 서 v에 서 v만이 캐시 할 수 있으며 서 v에 캐시하지 않도록 지시합니다. 후자의 코드 두 줄은 브라우저에 캐시하지 말 것을 요청합니다. 위의 코드는 다음 세 가지 헤더로 연결됩니다.

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

브라우저 캐싱을 방지하기 위해 쿼리 문자열에 고유 한 것을 추가 할 수도 있습니다.

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

당신이 시도한 어떤 것도 고정 된 특별한 이유가 있습니다.

우선 web.config의 <caching> 요소를 사용하여 브라우저 에 응답을 캐시하는 방법을 지시하지 않습니다. IIS 서버 가 응답을 캐시하여 향후 요청에서 다시 사용할 수 있도록 구성하는 방법입니다. Here 은이를 설명하는 문서입니다.

다음으로 <meta> 태그. 일반적으로 캐시 제어는 실제 HTTP 헤더로 수행됩니다. <meta> 태그를 사용하여 HTTP 응답 헤더에서 전혀 지정되지 않은 헤더를 설정할 수는 있지만 이미 설정된 HTTP 헤더를 무시하지는 않습니다. IIS는 응답 헤더에 캐싱을위한 기본값을 가지고 있으므로 <meta> 태그는 실제로 아무 것도하지 않습니다. <meta> 태그는 정말로 file:/// url을 통해로드 할 때만 유용합니다.

수행하려는 작업을 안정적으로 수행하려면 실제로 서버에서 사용하려는 캐시 제어 헤더를 보내야합니다. 이것은 지원하려는 브라우저에 따라 다를 수 있지만 각도를 사용하고 있기 때문에 현대적인 브라우저를 지원한다고 가정 할 수 있습니다. 이는 간단합니다. 다음은 웹 사이트에있는 모든 정적 파일에 대한 캐싱을 사용하지 않도록 설정 합니다. 실제로는 원하는 내용이 아니지만 가이드 역할을 할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <location path=".">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

그러나 가장 먼저해야 할 일은 IIS에서 보내는 현재 응답 헤더를 검사하는 것입니다. 이는 Chrome 개발자 도구를 사용하여 쉽게 수행 할 수 있습니다. 응답에 Cache-Control: 헤더가 표시되면 <meta> 태그가 작동하지 않는 이유에 대한 내 추론을 확인합니다.

정적 .html 파일이 아니라 ASP.NET을 사용하여 각도 응용 프로그램 용 HTML을 생성하는 경우 가장 좋은 방법은 컨트롤러에 캐시 헤더를 설정하는 코드를 추가하는 것입니다.

Response.Cache.SetCacheability(HttpCacheability.NoCache);

오래된 브라우저 나 깨진 브라우저를 많이 지원하려면 추가해야하는 헤더를 설명하는 다른 리소스가 있습니다.이 리소스는 web.config 또는 ASP.NET 코드를 사용하여 추가 할 수 있습니다. 다시 반복하고 싶습니다. 서버에서 보낸 응답 헤더를보고 있는지 계속해서 문제가 발생하는 경우.





webpack