Deploy angular on apache2 with SSL certificate

user_7637261 0
Viewed 212

I have a running apache2 server, I want to host an angular application on it, so I built the angular application using ng build then I created the configuration file for apache and I added .htaccess configuration to enable internal routes. All running correctly using HTTP port 80.

Now I want to run my application only using HTTPS, so I created a certificate and changed the apache configuration to 443 and added certification inside it. HTTPS is working now but only the index page is running. Internal routes show "Not Found" (as if I do not have .htaccess).

.htaccess

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

000-default.conf

<VirtualHost *:443>
ServerAdmin MYSERVERNAME
    DocumentRoot /var/www/html
 ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    SSLEngine on
    SSLCertificateFile /etc/apache2/certificate/apache-certificate.crt
    SSLCertificateKeyFile /etc/apache2/certificate/apache.key

</VirtualHost>
angular ssl apache
1 Answers

Update for Angular 2 final version

In fact, it's normal that you have a 404 error when refreshing your application since the actual address within the browser is updating (and without # / hashbang approach). By default, HTML5 history is used for reusing in Angular2.

To fix the 404 error, you need to update your server to serve the index.html file for each route path you defined.

Methd - 1

app.module.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})

Alternative

Use RouterModule.forRoot with the {useHash: true} argument.

import { NgModule } from '@angular/core';
...

const routes: Routes = [//routes in here];

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

Use RouterModule.forRoot with the {useHash: true} argument.

In this case, when you refresh the page, it will be displayed again (but you will have a # in your address).

Method - 2

index.html

<base href="./">

More Detail

SERVER METHOD

  • NGINX

    server { server_name my-app;

     root /path/to/app;

 location / {
     try_files $uri $uri/ /index.html;
 }

    }

  • Apache

    <VirtualHost *:80> ServerName my-app

     DocumentRoot /path/to/app

 <Directory /path/to/app>
     RewriteEngine on

     # Don't rewrite files or directories
     RewriteCond %{REQUEST_FILENAME} -f [OR]
     RewriteCond %{REQUEST_FILENAME} -d
     RewriteRule ^ - [L]

     # Rewrite everything else to index.html to allow HTML5 state links
     RewriteRule ^ index.html [L]
 </Directory>
user_141234060
Related