0

I have a working NodeJS server and an Angular 9 app. I'm able to test the app in development mode, it works perfectly.

But, when I build the app with ng build --prod and try to access it with NodeJS server I get several errors about file load:

Refused to apply style from 'http://localhost:8080/styles.09cf2cc3740ba29d305c.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

GET http://localhost:8080/runtime.689ba4fd6cadb82c1ac2.js net::ERR_ABORTED 404 (Not Found)

I have a proxy file in the app to redirect all its petitions to NodeJS:

proxy.conf.json

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Am I missing something?

Andrés Marotta
  • 345
  • 3
  • 21
  • Please could your give more info: you're using NodeJS for backend API or just to serve static content (your Angular app), or both ? – Thierry Falvo Mar 12 '20 at 12:21
  • I have to say both, I think. I have endpoints for web's querying but I had to put some code for static files like: ```app.use(express.static(config.paths.webs));```. I would like to put the code but it's like a lot. – Andrés Marotta Mar 12 '20 at 12:26

1 Answers1

0

proxy.conf.json aims to provide you an easy way to access to backend by rewriting url in development environment, by using ng serve.

For example, by accessing http://localhost:4200/api, in fact, you access http://localhost:3000/api. (so your backend).

But here, you're issue is how to serve Angular files with NodeJS.

Here is a minimal express code which serves an API endpoint /api, and also static files inside public sub-directory.

const express = require('express')
const app = express()

app.use(express.static('public'));

app.get('/api', function (req, res) {
  res.send({ message: 'api ok' })
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

Copy all files generated by ng build --prod, (see inside dist folder, and your-app-name subfolder) to public folder.

node app.js

You will be able to access your Angular app at http://localhost:3000, and your Angular app will be able to access your API at http://localhost:3000/api.

Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39