CODEWITHSUNDEEP
angularnginxangular-universal
Pijush Karmakar
Pijush Karmakar

Reputation: 21

angular universal working successfully on localhost not on production server

angular universal running successfully on localhost but when deployed to production with nginx page view source only showing the static contents, but the same code is working in localhost.

I have also tested by disabling the js of browser, localhost is running as expected but when deployed to production server again only the static components gets rendered.

Please help.

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

Upvotes: 1

Views: 4805

Answers (3)

Hsuan-Wei Fu
Hsuan-Wei Fu

Reputation: 1

Had the same issue where localhost worked but prod on server didn't. Turns out it's due to the http protocol. On localhost it's http and server it's https, and this caused some asset requests to fail.

Upvotes: -1

Steve Belovarich
Steve Belovarich

Reputation: 31

I was running into the same issue. On localhost the response for the initial page prints the route's source in DevTools, but not on production. Turns out it was version mismatch on all the @angular packages on localhost vs production.

Upvotes: 0

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

There is an article about server-side rendering which is helpful to read, and I also highly recommend you to take a look at Angular Universal-starter repository on Git.

Please follow these steps and let me know if it does not work yet:

  1. Build the server project app.
  2. Run it on your localhost. Does it work?
  3. Depends on your build, and WebPack settings you might need to upload node_modules directory as well. Some WebPack settings (like Universal-starters) lets you deploy just dist directory and node_modules won't be needed.
  4. When you deployed the code on your server, you need to run your node app. You can run it using node dist/server.js, or using one of Nodejs production process manager, such as pm2 or forever.
  5. You need to configure Nginx to redirect to the defined Nodejs port (4000 or what you exported)

It hopefully works correctly if you follow the instructions above.

Upvotes: 2

Related Questions