title: Clear chrome browser cache in Angular 7
body: <p>I use angular 7
  I have problem with the cache</p>
  <p>I build my project using this command :</p>
  <pre><code>node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --aot --outputHashing=all
  </code></pre>
  <p>this is my <strong>index.html</strong></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html  class=&quot;loading bordered-layout&quot;
  lang=&quot;en&quot;
  data-layout=&quot;bordered-layout&quot;
  data-textdirection=&quot;rtl&quot;&gt;
  &lt;head&gt;
   
  
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;title&gt;edo app&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;
    &lt;meta http-equiv=&quot;cache-control&quot; content=&quot;no-cache, must-revalidate, post-check=0, pre-check=0&quot;&gt;
    &lt;meta http-equiv=&quot;expires&quot; content=&quot;0&quot;&gt;
    &lt;meta http-equiv=&quot;pragma&quot; content=&quot;no-cache&quot;&gt;
    
    &lt;link rel=&quot;icon&quot; href=&quot;./assets/img/app/favicon.png&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;resource&quot; type=&quot;application/l10n&quot; href=&quot;./assets/locale/en-US/viewer.properties&quot; /&gt;
  
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;
      &lt;!-- Font--&gt;
  
  
  &lt;/head&gt;
  &lt;body  class=&quot;
  vertical-layout vertical-menu-modern
  navbar-floating
  menu-expanded
  footer-static
  &quot;
  data-open=&quot;click&quot;
  data-menu=&quot;vertical-menu-modern&quot;
  data-col=&quot;&quot;&gt;
  &lt;app-root&gt;&lt;/app-root&gt;
  
  &lt;div id=&quot;preloader&quot; class=&quot;loadingIn&quot;&gt;
    &lt;div id=&quot;loader-logo&quot; class=&quot;animate__fadeOutLeft&quot;&gt;&lt;img src=&quot;./assets/img/app/logo1.svg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
    &lt;img id=&quot;loader-bar&quot; class=&quot;animate__zoomOut&quot; src=&quot;./assets/img/app/three-dots.svg&quot; /&gt;
  &lt;/div&gt;
  
  
  
    &lt;script src=&quot;./assets/js/ckeditor/ckeditor.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./assets/shared/js/vendors/vendors.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./assets/shared/js/theme/app-menu.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./assets/shared/js/theme/app.js&quot;&gt;&lt;/script&gt;
    
    &lt;script type=&quot;text/javascript&quot;&gt;
  
    
      (function (window) {
        // Polyfills DOM4 MouseEvent only on IE11
        // Fixes ngx-charts line-chart hover
        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent#Polyfill
        if (!!window.MSInputMethodContext &amp;&amp; !!document.documentMode || document.documentMode === 10) {
          function MouseEvent(eventType, params) {
            params = params || { bubbles: false, cancelable: false };
            var mouseEvent = document.createEvent('MouseEvent');
            mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  
            return mouseEvent;
          }
          MouseEvent.prototype = Event.prototype;
          window.MouseEvent = MouseEvent;
        }
      })(window);
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>but the problem that the the text is changed and not displayed in correct way</p>
  <p>I have this code in Html components</p>
  <pre><code>  &lt;span id=&quot;commentId&quot; [innerHTML]=&quot;this.comment&quot;&gt;
                              
      &lt;/span&gt;
  </code></pre>
  <p>but when I clean the cache from my chrome browser the text is displayed in correct way</p>