CODEWITHSUNDEEP
angularangular2-routing
Robert
Robert

Reputation: 543

Angular2 routing / deep linking not working with Apache 404

I am following the Angular 2 routing examples. Using the "lite" webserver I am able to navigate from the root and deep linking works, but using Apache I can navigate from the root, but get 404 Not Found errors when following links direct to routes.

For example the following URL works against the "lite" webserver started on port 3000 by npm.

http://localhost:3000/crisis-center/2

But the next URL against Apache running on port 80 fails.

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

I did try a few .htaccess solutions recommended for similar Angular 1 issues but no luck. If anyone has had Angular 2 routing and deep linking work on Apache please do let me know how you achieved that.

@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
},

{path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter',  'CrisisDetail', {id:3}]}
])

Boot.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent}     from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Upvotes: 35

Views: 44775

Answers (8)

Amar Premsaran Patel
Amar Premsaran Patel

Reputation: 1383

This generator worked for me and my HostMonster account which uses Apapche HTTPD. The .htaccess file it generated worked out of the box:

https://julianpoemp.github.io/ngx-htaccess-generator/#/generator

# Generated with ngx-htaccess-generator v1.0.7
# https://julianpoemp.github.io/ngx-htaccess-generator/


<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -s [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]
</IfModule>

Thank you, Julian Pömp!

Upvotes: 0

Rein Baarsma
Rein Baarsma

Reputation: 1536

As the other answers don't really answer the question for if you want it to work with Apache. HashLocationStrategy remains an option, but if you want it to work as is on Apache you need to do the following:

Create a new file .htaccess in the same location as your index.html. The following code will be inside:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

(Note that in the question the <base href="/crises-center/"> inside the index.html should be identical to the RewriteBase)

Answer adapted from question+answer from Angular 2 routing and direct access to a specific route : how to configure Apache?

Upvotes: 59

Misha
Misha

Reputation: 5380

Either in httpd.conf or in apache2.conf add the following:

<Directory "/var/www/html/">
    Options FollowSymLinks
    Allow from all
    AllowOverride All
</Directory>
  • Change "/var/www/html/" to your website location

And in .htaccess paste:

RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
      # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Upvotes: 1

Anju Batta
Anju Batta

Reputation: 104

If you are working with the ionic build and upload your site on hosting server then you need to add the .htaccess file on your root directory inside the www folder.

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) / [R=302,NC,L]

Upvotes: 2

Playnox
Playnox

Reputation: 1124

For those who's running on Apache use this .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

If you still get an error run those 2 commands:

sudo a2enmod rewrite
sudo systemctl restart apache2

Upvotes: 18

yallam
yallam

Reputation: 1244

For angular4/angular in app.routes.module.ts include useHash as below,

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})

Upvotes: 5

luke
luke

Reputation: 4155

According to Rein Baarsma answer you have to create .htaccess file and put it in the same directory as your index.html on your Apache server. It might be for example htdocs directory, but this depends on your Apache configuration.

However I use different .htaccess file content and it works for me for all links/routes without necessity to specify rewrite base:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

It is a modification of code provided by Rein Baarsma.

My app is Angular 2+ (4.x.x) application based on angular-cli project. It hardly depends on direct URLs to addresses provided by Angular routing. Without .htaccess file above I got 404 not found after clicking every direct URL link. Now with use of this .htaccess file everything works fine.

Upvotes: 4

Langley
Langley

Reputation: 5344

You have to make your server handle all routes back to index.html or use HashLocationStrategy

(https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html)

Take a look at:

Is Angular 2's Router broken when using HTML5 routes?

Upvotes: 1

Related Questions