0

I have an Angular 5+ application that gets served and runs perfectly fine when using ng serve --aot but when I do ng build --aot && node app.js I get the following errors in the browser:

Uncaught SyntaxError: Unexpected token <            runtime.js:1 
Uncaught SyntaxError: Unexpected token <            polyfills.js:1 
Uncaught SyntaxError: Unexpected token <            styles.js:1 
Uncaught SyntaxError: Unexpected token <            vendor.js:1 
Uncaught SyntaxError: Unexpected token <            main.js:1

Below is my server code and dependencies.

app.js:

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

// import environmental variables from our variables.env file
require('dotenv').config({ path: 'variables.env' });

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

const app = express();

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

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

// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

// Get port from environment and store in Express.
const port = process.env.PORT || '3000';
app.set('port', port);

// Create HTTP server.
const server = http.createServer(app);

// Listen on provided port, on all network interfaces
server.listen(port, () => console.log(`Server running on localhost:${port}`));

package.json dependencies

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular-font-awesome": "^3.1.2",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.1.1",
    "buttercms": "^1.1.1",
    "core-js": "^2.5.4",
    "cosmicjs": "^3.2.10",
    "dotenv": "^6.0.0",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "http": "0.0.0",
    "ngx-bootstrap": "^3.0.0",
    "ngx-editor": "^3.3.0",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },

Has anybody else ever run into this error and maybe have any idea what I'm doing wrong here?

Mr Shantastic
  • 520
  • 1
  • 7
  • 14

2 Answers2

2

The < unexpected character usually means it's receiving HTML, such as in a 404 page or a 500 page. You can try navigating to those URLs and see which it is. Likely, the paths to those files are different between the webserver and ng serve. I would try to find what URL those files are actually hosted at and look into what the recommendation is for setting the proper base href. It has been a while since I've looked at the spec for setting the base href, though this question is recent and seems to cover the topic.

Good luck!

Michael
  • 358
  • 3
  • 8
  • So you are correct, the base href seems to be the issue here. I didn't realize that the ng build was NOT building it directly under the dist folder but instead in a subfolder within the dist folder, with the project name. Because of this, I needed to change the base href in the index.html file from '/' (root) to '/project-name/' (the subfolder the code is transpiled into). Thank you very much for pointing me in the correct direction!! – Mr Shantastic Jun 18 '18 at 15:51
0

The problem is in your frontend section. It is not about your nodejs code.

After ng build go to dist/your project folder say 'something'. Then open the index.html file and change the base URL, which is by default.

If you put your project folder on nginx or apache then your base URL should be 

<base href="http://localhost/something/">

and in my case, version of Angular is: 7.1.4

Ahmad Sharif
  • 3,799
  • 5
  • 35
  • 47