How to properly set Angular for production in NodeJS Express Server?

Question

I have been working for hours on figuring out how to deploy my Angular 6 project on NodeJS Express server,

First, in development i use ng serve which refer to localhost:4200 (default) and another one is Node Express for API (interacting with DB) on localhost:3000. In production i want the Angular build to be served from that Node Express server too.

So what i did was:

Setting up <base href="/"> on index.html on Angular Project
Run ng build --prod it went 100% smooth, no errors.
Copy all files from dist/myprojectname on Angular to Node Express server directory under views/.
In index.js i add following lines app.use(express.static(path.join(__dirname, '/views/')));

it got error something like this

Refused to apply style from 'http://localhost:3001/styles.a64e6aa0f6090e05d2190.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
3localhost/:16 GET http://localhost:3001/runtime.16a329deb1d564eef6599.js/ net::ERR_ABORTED 404 (Not Found)

If i use app.use('/*', express.static(path.join(__dirname, '/views/')));

it will give following error: Uncaught SyntaxError: Unexpected token <

score 0 · Answer 1 · answered Jan 22 '19 at 08:16

0

This seems similar to this issue, are you sure that your css files are NOT starting with comments?

From the linked question's answer:

The issue i think it was with a CSS library starting with comments. While on dev, i do not minify files and i don't remove comments, this meant that the stylesheet started with some comments, causing it to be seen as something different from css.

answered Jan 22 '19 at 08:16

ForestG

13,602
7
31
56

no, the generated CSS from angular build process is minified and stripped from any comments – xcode Jan 22 '19 at 08:19
hm... when you build the app, there are no warnings or errors? What happens if you delete ALL your css content? – ForestG Jan 22 '19 at 08:23
the problem its just my build version wont be served from Node Express Server – xcode Jan 22 '19 at 08:26

score 0 · Answer 2 · answered Jan 22 '19 at 10:10

Hope this helps you this worked perfectly fine for me. The important part of the code is below. My angular application is in ROOT_FOLDER/dist/index.html . You can set the compile/output path in angular.json (variable is outputPath). My express.js file and package.json file is just under the root folder.

const bodyParser = require('body-parser');
const DIST_FOLDER = join(process.cwd(), 'dist');
const STARTING_SERVER_MSG = 'Running server on port %s';
const VIEW_ENGINE_STR = 'view engine';
const HTML_STR = 'html';
const VIEWS_STR = 'views';
const BROWSER_STR = 'browser';
  private routes() {
    // This part might be useless STRAT_LINK later
    this.app.set(VIEW_ENGINE_STR, HTML_STR);
    this.app.set(VIEWS_STR, join(DIST_FOLDER));
    this.app.use(express.static(join(DIST_FOLDER)));
    this.app.use(bodyParser.json());
    this.app.use(bodyParser.urlencoded({extended: false}));
    // this.app.use('/env', envRouter);
    // get router
    this.app.use(function (req, res, next) {
      res.sendFile(join(DIST_FOLDER,  'index.html'), {req});
    });
  }

How to properly set Angular for production in NodeJS Express Server?

2 Answers2