How to configure apache for angular 2

Question

I need to configure virtual host for angular2. I have tried following this article

https://www.packtpub.com/mapt/book/Web+Development/9781783983582/2/ch02lvl1sec15/Configuring+Apache+for+Angular

According to this i need to setup virtual host like this

<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>
</VirtualHost>

Can anyone tell me what should be the path to app as my app is running on default angular 2 port that is 4200. Is there any other way to do it.

You say that your app is running on the default Angular 2 port 4200 that is when using a local server for development? When you want to use this on a production server you would build the Angular2 app depending on your build, if you're using angular-cli you would use ng build --prod and upload the contents of the dist folder to your apache server document root for that virtual host. — J J B
– J J B, Commented Dec 27, 2016 at 15:58
@JJB i have done that and app is running on ip:4200, but i want to use virtual hosts for eg: www.testapp.com and redirect this to my angular app using apache — kirti
– kirti, Commented Dec 27, 2016 at 17:03
You use the contents inside the dist folder just like any other website you upload that content and serve that via apache and make sure all .html files load via index.html. What you are talking about is the local test server that is created when running Angular in a test environment you won't be using NodeJS to serve the Angular2 app you will be using your Apache server. The ng serve is just for serving the local development server it has nothing to do with Angular. You are using angular-cli right? — J J B
– J J B, Commented Dec 27, 2016 at 17:08
Just to be sure... your project IS in fact angular-cli or some sort of webpack?? — AVJT82
– AVJT82, Commented Dec 27, 2016 at 18:02

J J B · Accepted Answer · 2016-12-27 17:20:21Z

34

angular-cli build

On your local development environment run ng build --prod in your project root.

This will create a folder called dist, you want to place all the files and folders from within dist to your Apache root directory on your server.

Setup apache to serve routes to index.html. You have two methods you can use, either edit your virtual host or use .htaccess in your website root directory.

Option 1: Virtual Host

<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>
</VirtualHost>

Option 2: .htaccess

<IfModule mod_rewrite.c>
    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]
</IfModule>

answered Dec 27, 2016 at 17:20

J J B

9,3001 gold badge30 silver badges42 bronze badges

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

9 Comments

kirti Over a year ago

@J J B Can you tell me what that index.html file will have.Can you show me example of index.html

J J B Over a year ago

The index that is in your dist folder. Can you please confirm your build system you are using. Webpack or SystemJS? Are you using angular-cli?

Ashish Ranjan Over a year ago

@JJB, I am new to this mod_rewrite configuration. Just wanted to confirm my understanding of the conditions and rules you have mentioned. 1. The first two conditions will mean, If the url is pointing to a file or a directory then render it and exit 2. The first rewrite rule will

come in action if the first two conditions didn't match and will simply close the condition checking for the above two conditions

(what is - between ^ and L ?) 3. The second rewrite rule says If it is none of the above, then redirect to index.html

J J B Over a year ago

@AshishRanjan Yes that is correct and ^ means match anything - means do nothing

J J B Over a year ago

@Lint Yes this will work for Angular apps with multiple routes because the app will receive all routes and Angular will translate the routes on the client-side.

|

Collectives™ on Stack Overflow

How to configure apache for angular 2

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related