Angular routing when directly browsed are not found

Question

So I defined some routes /home, /contact, ... Created the dist folder by using ng build --prod --base-href and copied the content of the dist folder via filezilla to the hosting server. When directly browsing the website and redirecting from on the website there is no problem but if you directly browse to website/home, it says 404 Not Found The requested URL /home was not found on this server.

The hosting support responded with these are probably CleanURL's defined in a .htaccess file we can't give support for that.

I thought that clean urls were readable restcalls but maybe the meaning is greater than only rest. But is there a solution for this?

what webserver do you use? it is likely that you need some additional configuration (rules) to enable directly targeting your routes. See here for example (nginx): https://stackoverflow.com/questions/38991541/nginx-and-angular-2 — Riscie, Apr 04 '18 at 06:30
like @Riscie say if you don't config the server for url rewrite this will not work — Tarek.Eladly, Apr 04 '18 at 06:33
just a standard linux hosting service and yes basehref is defined as /, the hosting is from [combell](https://www.combell.com/en/hosting/web-hosting) — Burst of Ice, Apr 04 '18 at 07:31
[the first one here](https://www.combell.com/en/hosting/web-hosting/specifications) — Burst of Ice, Apr 04 '18 at 07:40
in IIS you have to install URL Rewrite, I think similar you have to install in linux also — balajivaishnav, Apr 04 '18 at 09:16
and what about creating a `.htaccess ` file shouldn't that work? — Burst of Ice, Apr 04 '18 at 10:59

erickyi2006 · Accepted Answer · 2018-04-04T13:51:14.727

1

more likely you have not defined the HashLocationStrategy in your providers (in app.module.ts)

Updated here.. i tried to put into the comments but it can't format

There are 3 ways 1st way

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,..
    RouterModule.forRoot(routes, { useHash: true }) 
  ],
  declarations: [
    AppComponent, ...
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})

2nd way

@NgModule({
  declarations: [
    AppComponent, ...
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule, ...
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  entryComponents: [],
  bootstrap: [AppComponent]
})

3rd way - recommended for Angular2 Use PathLocationStrategy

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})

There are pros and cons - i used 2nd as I came from angular1, 2,4,5 (old school) :p

edited Apr 04 '18 at 13:51

answered Apr 04 '18 at 06:56

erickyi2006

216
2
8

So I have to do `RouterModule.forRoot(routes, {useHash: true})` instead of just giving in the routes then? – Burst of Ice Apr 04 '18 at 07:39
yes, see updated text above (I tried to comment here but i can't format). – erickyi2006 Apr 04 '18 at 13:52
method 1 and 2 give: http://localhost:4200/#/home a /#/ between my existing routes, 3rd way works locally I'll try on the apache server, do I still need a .htaccess file which redirects direct browsing to clean urls to index.html? – Burst of Ice Apr 04 '18 at 17:40
in theory, no. because if your current settings go to your app, the routing will handle the rest for you. p/s i didn't use apache. i m using nodejs express to serve our REST requests – erickyi2006 Apr 05 '18 at 00:18
my '' route redirects to '/home' so that's probably why it happend but It works so thanks. – Burst of Ice Apr 09 '18 at 12:32

Angular routing when directly browsed are not found

1 Answers1