title: Angular 7 - How to separate files in different directories
body: <p>I am configuring my Angular 7 application to production and trying to organise files in different directories.</p>
  <p>angular.json</p>
  <pre><code>            &quot;architect&quot;: {
                  &quot;build&quot;: {
                      &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
                      &quot;options&quot;: {
                          &quot;outputPath&quot;: &quot;dist/appname-ui&quot;,
                          &quot;index&quot;: &quot;src/index.html&quot;,
                          &quot;main&quot;: &quot;src/js/main.ts&quot;,
                          &quot;polyfills&quot;: &quot;src/js/polyfills.ts&quot;,
                          &quot;tsConfig&quot;: &quot;src/tsconfig.app.json&quot;,
                          &quot;assets&quot;: [
                              &quot;src/favicon.ico&quot;,
                              &quot;src/assets&quot;
                          ],
                          &quot;styles&quot;: [
                              &quot;src/styles.css&quot;,
                              &quot;src/appname-theme.scss&quot;
                          ],
                          &quot;scripts&quot;: []
                      },
  </code></pre>
  <p>Currently my directory looks like this:</p>
  <pre><code>├── dist
  |   ├── &lt;appname&gt;
  |   |   ├── assets
  |   |   |   ├── icons
  |   |   |   ├── images
  
  |   |   |   index.html
  |   |   |   *.js (bundled files: runtime.js, polyfills.js, vendor.js, main.js)
  |   |   |   *.map
  |   |   |   style.css
  |   |   |   *.woff, *.woff2, *.tff, *.eot
  </code></pre>
  <p>With the compilation, bundled javascript files are generated on the root directory along with font files that are copied to the root directory as well</p>
  <p>I would like to:</p>
  <ol>
  <li>Specify a different directory to bundled js files</li>
  <li>Specify a different directory to font files.
  (if it has to be the same directory of the js files no problem, but nice to be different)</li>
  </ol>
  <p>The structure would looks like this:</p>
  <pre><code>├── dist
  |   ├── &lt;appname&gt;
  |   |   ├── assets
  |   |   |   ├── icons
  |   |   |   ├── images
  
  |   |   |   index.html
  |   |   |   style.css
  
  |   |   ├── libs
  |   |   |   |   *.js
  |   |   |   |   *.map
  
  |   |   ├── fonts
  |   |   |   *.woff, *.woff2, *.tff, *.eot
  </code></pre>
  <p>Is it possible to achieve this? If yes how?</p>
  <p>Thank you very much for your help.</p>
  <p>Best Regards</p>