5

Using Angular 2 RC 4 with the updated @angular/router, I got the route URLs to display in the browser using the answer in this question

However, when I refresh or directly request a page with a route other than the default, it takes me to the default page (as if I requested index.html) rather than the routed page I want. How can I make the Angular 2 routes work correctly on a page refresh with Apache 2.4?

Routes and bootstrap:

const routes: RouterConfig = [
{ path: '', redirectTo: 'dashboardTab', terminal: true },
{ path: 'dashboardTab', component: DashboardComponent },
{ path: 'missionTab', component: MissionComponent, children: childRoutes }];

bootstrap(NavbarComponent, [disableDeprecatedForms(), provideForms(),   provideRouter(routes), {provide: Window, useValue: window}, HTTP_PROVIDERS, ResponsiveState, {provide: PLATFORM_DIRECTIVES, useValue: RESPONSIVE_DIRECTIVES, multi: true}]).catch((err: any) => console.error(err));

base href in index.html: <base href="/">

Improve this question
3
  • Please show some code that demonstrates what you're trying to accomplish. Routes, <base> tag in index.html, bootstrap(...), ... Commented Aug 4, 2016 at 6:36
  • @GünterZöchbauer Done. I didn't think adding code was relevant initially, though as the page refresh routing works when I run my code on lite-server. It just doesn't seem to work on my Apache server. Commented Aug 4, 2016 at 15:50
  • terminal: true should be pathMatch: 'full' in the most recent version. If it runs with lite-server but not with Apache then your Apache is not configured to support HTML5 pushState. You can try switching to HashLocationStrategy to verify it. If this works, it's a server configuration issue. Commented Aug 4, 2016 at 15:52

3 Answers 3

Reset to default
12

Basically apache does not know anything about your angular application routes so it can't do much here.

But

Trick here is to get your apache server to serve index.html file even in page not found situations so that angular then can render the routes.

Here are the steps

  1. Create a file called .htaccess inside of your angular applicaiton src folder, and copy the following code to it 

  RewriteEngine On
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
  RewriteRule ^ /index.html

  1. You need to add this .htaccess file to the assets array in your angular.json so that angular will copy it to your dist folder when you do a production build.

  2. finally after creating a production build if you copy your application to apache server everything should work fine, but in case if it does not you may want to do the last step

go to /etc/apache2/apache2.conf inside your server and modify 

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

To look like this

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

If that does not work probably you might not have enabled mod rewrite 

sudo a2enmod rewrite

See the deployment guide from angular team

https://angular.io/guide/deployment

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Use the code in vhost of apache2:

<Directory /var/www/html/yourproject>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /yourproject
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /yourproject/index.html [L]
</Directory>

And use the code in index.html

<script>document.write('<base href="' + document.location + '" />');</script>

this solves.

Improve this answer

1 Comment

Thanks, This worked perfectly for me even without index.html changes.
0

Use this to set a handler for any URL that doesn't map to anything in your filesystem.

<Location "/my-app">FallbackResource /my-app/index.html

Add this line of code in your httpd.conf or in /etc/apache2/sites-enabled/000-default.conf configuration file.

Your angular application routing will work on refresh.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.