-1

I have spent 6 whole days for converting a HTML5 only app to Angular 4 routing app. Just to be able to use Angular 4 routing to make website more SEO friendly.

After developing it successfully I deployed it on the server just to realize the direct urls are resulting in 404 page. Example: http://abc .com/route

This same thing works fine on clicks of routerLinks. I have seen several blog posts about this issue but I am not able to decide on which will be the quickest solution for this. Can someone help me with it? I am not using Angular CLI, please note.

vishal kokate
  • 126
  • 3
  • 12
  • You need to configure your webserver for that. Which one are you using?? – David Feb 22 '18 at 14:01
  • Yeah, the issue is that Angular, acting as a Frontend Framework, provides its own Server during Development, but leaves you hanging in Production. Basically, even though you may not use your Backend for anything more than providing the Angular Application, you still need to set it up. Mind you, it would only redirect to index.html, no matter the actual Route. Angular would take it from there. Depending on your requirements, you might even opt for a Serverless app (Azure of AWS). Check out the Post from Obed further down for details. – DeuxAlpha Feb 22 '18 at 14:06
  • Besides, if you want to be really seo friendly, then you should consider using angular universal https://universal.angular.io/ (although it's probably ok for google without) – David Feb 22 '18 at 14:38

1 Answers1

1

This is because all routes have to go to the the index.html and angular-router will do its routing from there. So get a node server up and running and redirect all request to index.html

this is how ur server might look like

import { json, urlencoded } from "body-parser";
import * as compression from "compression";
import * as express from "express";
import * as path from "path";


const app: express.Application = express();

app.disable("x-powered-by");

app.use(json());
app.use(compression());
app.use(urlencoded({ extended: true }));

if (app.get("env") === "production") {

  // in production mode run application from dist folder
  app.use(express.static(path.join(__dirname, "/../client")));
}
app.use('*', (req, res)  => {
  res.sendFile(path.join(__dirname, '/../client/index.html'));
});
// catch 404 and forward to error handler
app.use((req: express.Request, res: express.Response, next) => {
  const err = new Error("Not Found");
  next(err);
});

// production error handler
// no stacktrace leaked to user
app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {

  res.status(err.status || 500);
  res.json({
    error: {},
    message: err.message,
  });
});

export { app };

you can clone this project and replace the angular app with yours

Obed Amoasi
  • 1,837
  • 19
  • 27
  • Okay. But after redirecting will it open the intended URL or just index.html? I have added redirect rule using .htaccess file for now. And when someone tries to visit the path /abc the user is taken to index.html. Where as what I want is he should be redirected to /abc using Angular routing. – vishal kokate Feb 23 '18 at 06:22