title: Modifying angular.json Angular 6+ to load scripts in index.html correctly
body: <p>I am running an angular project on my computer:</p>
  
  <p>Angular CLI: 7.1.4
  Node: 11.6.0
  OS: darwin x64
  Angular: 7.1.4</p>
  
  <p>I have updated angular from 4.5.5 to 7.1.4.</p>
  
  <p>Now I get the following error in my console in my chrome browser:</p>
  
  <blockquote>
    <p>9 GET <a href="http://localhost:3000/runtime.js" rel="nofollow noreferrer">http://localhost:3000/runtime.js</a> net::ERR_ABORTED 404 (Not Found)</p>
  </blockquote>
  
  <p>So it can't find the script in my index.html (See below)</p>
  
  <p>But when I have a look at my folder in my dev environment I can find the files and the path seems correct too:</p>
  
  <p><img src="https://kommis.net/wp-content/uploads/2019/01/Bildschirmfoto-2019-01-03-um-16.02.33.png" alt="Screenshot Folder Public">
  ![two muppets][1]</p>
  
  <p>My backend is in Node.js and app.js file looks like this:</p>
  
  <pre><code>const express = require('express');
  
  const router = require('./router'),
      templates = require('./views/templates');
  
  // Setup
  const app = express();
  const port = process.env.PORT || 3000;
  router(app);
  
  templates.initSync();
  
  // Start server
  app.listen(port, function () {
      console.log('Kommis back-end is running on port', port);
  });
  
  // Catch unhandled promise rejections, see
  // https://nodejs.org/dist/latest-    v8.x/docs/api/process.html#process_event_unhandledrejection
  process.on('unhandledRejection', (err) =&gt; {
          console.log(err.stack);
      });
  
  module.exports = app;
  </code></pre>
  
  <p>This is my index.html file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Digitaler Tischplan&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.png"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;script type="text/javascript" src="runtime.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="polyfills.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="styles.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="vendor.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>I realized I had to add to the base ref <code>gen/</code> then it works!</p>
  </blockquote>
  
  <p>But how can I change the output of the generated angular code so that it works, without modifying it afterward?</p>
  
  <p>I had a look before I did the Angular update the scripts in the index.html file are stated like this:</p>
  
  <p><code>gen/scriptname.js</code></p>
  
  <p>Why is it not doing it anymore?</p>
  
  <p>These are my first lines of the angular.json:</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "angular-src": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
               "outputPath": "../public/gen/",
               "index": "src/index.html",
               "main": "src/main.ts",
               "tsConfig": "src/tsconfig.app.json",
               "polyfills": "src/polyfills.ts",
                "assets": [
                  "src/assets",
                  "src/favicon.ico"
               ],
                "styles": [
                 "src/css/main.scss"
                ],
                "scripts": []
              },
  </code></pre>
  
  <blockquote>
    <p>In order to build the angular application correctly I had to <code>gen/</code> in the <code>index.html</code> in the angular-src.</p>
  </blockquote>