title: How do I fix the 404 Not Found Error on Refresh for single-page Angular 6 app in SharePoint
body: <p>I know there have been several similar posts and I have tried all recommendations in those posts with no luck.</p>
  
  <p>I have a single-page Angular 6 application. No backend or anything like that. I am deploying to SharePoint. Everything works as expected except for when I refresh the page. When I refresh I get the 404 Not found error.</p>
  
  <p>my <code>base</code> tag is correct in my <code>index.html</code> file. </p>
  
  <p>In my app.component.ts file I placed </p>
  
  <pre><code>ngOnInit() {
      this.router.navigate([''])
    }
  </code></pre>
  
  <p>which works perfectly locally. When I hit refresh it goes back to my "home" page. </p>
  
  <p>I then tried adding in </p>
  
  <pre><code>ngOnInit() {
      this.router.navigate(['index.html'])
    }
  </code></pre>
  
  <p>per the recommendations on another post, which did not work. </p>
  
  <p>I also tried creating a web.congif file, which was another recommendation that had success in another post. </p>
  
  <p>It looks like:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;configuration&gt;
  &lt;system.webServer&gt;
      &lt;defaultDocument&gt;
          &lt;files&gt;
              &lt;clear /&gt;
              &lt;add value="index.html" /&gt;
          &lt;/files&gt;
      &lt;/defaultDocument&gt;
      &lt;rewrite&gt;
        &lt;rules&gt;
          &lt;rule name="AngularJS Routes" stopProcessing="true"&gt;
            &lt;match url=".*" /&gt;
            &lt;conditions logicalGrouping="MatchAll"&gt;
              &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
              &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;   
            &lt;/conditions&gt;
            &lt;action type="Rewrite" url="/" logRewrittenUrl="true" /&gt;
          &lt;/rule&gt;
        &lt;/rules&gt;
      &lt;/rewrite&gt;
   &lt;security&gt;
          &lt;requestFiltering allowDoubleEscaping="true"&gt;
              &lt;fileExtensions&gt;
                  &lt;add fileExtension=".json" allowed="true" /&gt;
              &lt;/fileExtensions&gt;
          &lt;/requestFiltering&gt;
  &lt;/security&gt;
      &lt;directoryBrowse enabled="true" /&gt;
  &lt;staticContent&gt;
  &lt;remove fileExtension=".woff" /&gt;
  &lt;remove fileExtension=".woff2" /&gt;
  &lt;mimeMap fileExtension=".woff" mimeType="application/font-woff" /&gt;
  &lt;mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /&gt;
  &lt;/staticContent&gt;
  &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>None of these have worked when deployed.</p>
  
  <p>Any ideas? I would greatly appreciate it!</p>