Syntax Error in Angular App: Unexpected token <

Question

I have an Angular app which runs perfectly in my local and production environment.. After a tiny change I made, I ran the app locally and it works fine.. Then I built the pr

Answer 1

I had the same problem and realized that I had changed the app.use(express.static(static folder)) statement after my last deploy causing this same unexpected token < error.

Make sure that your app.use(express.static(static folder)) statement contains the appropriate static folder where your js and css files are located and relative to where you are running node.

If you are using Angular and precompiling (ng build --prod) your front-end Angular code into a dist folder containing these files and not putting your back-end node files in the same folder (e.g a separate backend), then you may need to include the correct path as well.

For my example, I have my precompiled (ng build --prod) Angular files in /dist right off the project directory. Note that I also changed angular.json to be "outputPath": "dist" prior to precompiling to ensure this is where the precompiled Angular code would go. My server.js file that just starts the node server is at the project root, but my app.js file that contains the app.use(express.static(static folder)) statement and all the rest of my back-end node code is in a folder called /backend. The following statements both work for me in this case to correctly find the js and css files and eliminate the unexpected token < error:

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

or

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

Both statements appropriately direct node to look for the static js and css files in the /dist folder.