Angular runtime-es2015.js not found

user_2957975 0
Viewed 8918

When I run "ng build" I noticed that it creates a folder structure like this.

/dist/projectname/

Then it generates all the files in the projectname folder.

When I run my Angular app I get a 404 (Not found) error for the first script in the index file.

<body>
  <app-root></app-root>
    <script src="runtime-es2015.js" type="module"></script>
    <script src="runtime-es5.js" nomodule defer></script>
    <script src="polyfills-es5.js" nomodule defer></script>
    <script src="polyfills-es2015.js" type="module"></script>
    <script src="styles-es2015.js" type="module"></script>
    <script src="styles-es5.js" nomodule defer></script>
    <script src="vendor-es2015.js" type="module"></script>
    <script src="vendor-es5.js" nomodule defer></script>
    <script src="main-es2015.js" type="module"></script>
    <script src="main-es5.js" nomodule defer></script>
</body>
  1. Should they not have src="projectname/runtime-es2015.js" in them?
  2. How can I get build to not build with a project name folder?
  3. Is there something I can do in my code to reference the projectname folder since it doesn't assume it?

Additionally here is my server.js file since I feel like this is where the issues are coming from.

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();

const api = require('./server/routes/api');

// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, 'dist')));

app.use('/api', api);

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/clinic-manager/index.html'));
});

// Set Port
const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`Running on localhost:${port}`));

Thank you in advance for any help offered!

angular node.js
2 Answers

in your package.json, you could set the base-href when you build the "dist":

{
  "name": "projectname",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /projectname/",
... snip...
}

This will prepend "/projectname/" in front of all your references:

<body>
  <app-root></app-root>
    <script src="/projectname/runtime-es2015.js" type="module"></script>
    <script src="/projectname/runtime-es5.js" nomodule defer></script>
    <script src="/projectname/polyfills-es5.js" nomodule defer></script>
    <script src="/projectname/polyfills-es2015.js" type="module"></script>
    <script src="/projectname/styles-es2015.js" type="module"></script>
    <script src="/projectname/styles-es5.js" nomodule defer></script>
    <script src="/projectname/vendor-es2015.js" type="module"></script>
    <script src="/projectname/vendor-es5.js" nomodule defer></script>
    <script src="/projectname/main-es2015.js" type="module"></script>
    <script src="/projectname/main-es5.js" nomodule defer></script>
</body>

NOTE: I, too, had to do this because I'm deploying the client UI (angular) "dist" folder as part of a Spring application WAR file [deployed on tomcat] and we always define a context root (ex: https://myserver.ext/myApp). So I have a gradle bruild script in my application which calls NpmTask "run build" and my package.json defines the context root (ng build --base-href /myapp) as defined above. That way, I can code the UI using the rapid "ng serve" and I can also build the dist and define the context root in the "ng build" for when I deploy a new version to tomcat.

user_39301720

Well I found it!!

Go to angular.json file and change "outputPath": to be "dist", not "dist/projectname".

user_29579750
Related