angular 4 run project from dist index without HashLocationStrategy page reload 404

Question

I want to start/load my site from http://domain/dist/index.html

I have pointed my virtual host to dist/index.html, so I can load my site using this http://domain

My app.routes.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PathLocationStrategy ,LocationStrategy } from '@angular/common';

import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
{ path: "", loadChildren: "app/site/site-layout/site-layout.module#SiteLayoutModule" },
{ path: "admin", loadChildren: "app/admin/admin-layout/admin-layout.module#AdminLayoutModule" },
{ path: "**",    component: NotFoundComponent }
];
@NgModule({
  imports: [ RouterModule.forRoot(
      routes,
      { preloadingStrategy: SelectivePreloadingStrategy }
  )],
  exports: [ RouterModule ],
  providers: [
      { provide: LocationStrategy, useClass: PathLocationStrategy },
  ]
})
export class AppRoutingModule {}

Using above strategy, everything is fine, but I have http:/domain/admin is different part of my site, so when I directly open this from url, then it will give me 404 error. Also on all other routes, if I load it from url, it will give 404.

Now I have tried with HashLocationStrategy, With this 404 error issue solved. But If I am at http://domain/# and when I edit url on same window e.g. http://domain/#/admin then css of front layout will be there. I don't want this css at admin. It's conflict between two layout css. On second reload it's fine.

Is there any solution for that?

Any option for angular to work without hashtag and not face page reload 404 error.

Just for information I have server call to NodeJS. But I want my website first load from angular dist, not from server.

Thanks.

eko eko · Accepted Answer · 2017-05-24T06:00:48

It's giving you a 404 error because when you type in the url and hit enter the browser requests http://domain/admin from your server(node.js) and node.js does not have that route, Angular handles that in the client side. To overcome this problem, you can either define every route on your server side or you can do something like this:

app.get('/*',  function(req, res, next) {
    res.sendFile('index.html', { root: __dirname + '/dist' }); 
});

Note: the folder path to the index.html is just an example.

This will redirect every external url change to your index.html and from there on Angular will handle the routing.

As a side note I wouldn't suggest using HashLocationStrategy because it brakes server-side rendering which is usually necessary for production environment. More info on this topic: Is there any downside of HashLocation Strategy?

angular 4 run project from dist index without HashLocationStrategy page reload 404

1 Answers