title: Angular 11 assets not found after build
body: <p>I have a problem with assets folder in my angular app - after building an app, the assets couldn't be found.</p>
  <p>My index.html file:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;CodigitalExternal&lt;/title&gt;
    &lt;base href=&quot;./&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;  
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My angular.json file:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;MyApp&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          },
          &quot;@schematics/angular:application&quot;: {
            &quot;strict&quot;: true
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist&quot;,
              &quot;deployUrl&quot;: &quot;dist/&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;aot&quot;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;all&quot;,
                &quot;sourceMap&quot;: false,
                &quot;namedChunks&quot;: false,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;500kb&quot;,
                    &quot;maximumError&quot;: &quot;1mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;2kb&quot;,
                    &quot;maximumError&quot;: &quot;4kb&quot;
                  }
                ]
              }
            }
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;MyApp:build&quot;,
              &quot;deployUrl&quot;: &quot;/&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;MyApp:build:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;MyApp&quot;
  }
  </code></pre>
  <p>Because of <strong>&quot;deployUrl&quot;: &quot;dist/&quot;</strong> in build options, I have to change it to &quot;/&quot; in serve options.</p>
  <p>And then, I can load my images like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;/assets/icons/closeX-circle.blue.24x24.svg&quot; /&gt;
  </code></pre>
  <p>Everything works perfectly on localhost , but after building and deploying to the server, assets cannot be found. One solution for working assets I found is to change the paths by adding the <strong>dist</strong> prefix in src like that:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;dist/assets/icons/closeX-circle.blue.24x24.svg&quot; /&gt;
  </code></pre>
  <p>But then, the assets don't work on localhost. I know there is something incorrect with my configuration, but I don't know what.</p>