deploying angular 2 app on Apache server

Question

I am very new to Angular 2 and just created my very first demo angular application.

to allow it to be accessible from anywhere i want to deploy it on server.

as per instruction i have created build as well ( dist ) using

ng build --prod

I already have shared server for my php project with Apache install on it.

So i tried to upload there. After deployment when i tries to access that url my app gets break and console showing this errors:

GET http://www.example.com/styles.d41d8cd98f00b204e980.bundle.css net::ERR_ABORTED
www.example.com/:13 GET http://www.example.com/inline.7c167ae93970955c5261.bundle.js net::ERR_ABORTED
www.example.com/:13 GET http://www.example.com/polyfills.5c847b24df1f0cb11561.bundle.js net::ERR_ABORTED
www.example.com/:13 GET http://www.example.com/main.dbcfef8941682469b50c.bundle.js net::ERR_ABORTED
www.example.com/:13 GET http://www.example.com/vendor.c769f33e138d82fd4650.bundle.js net::ERR_ABORTED
www.example.com/:13 GET http://www.example.com/main.dbcfef8941682469b50c.bundle.js 404 (Not Found)

Is it not possible to to deploy angular and php on same server.

if yes the guidelines are highly helpfull. thank you

Did you copied the contents of the dist folder to the webserver? — jonhid
– jonhid, Commented Mar 15, 2018 at 5:11

kshetline · Accepted Answer · 2018-03-15 05:12:30Z

1

Are you serving your demo from the root of example.com, or from some subdirectory like example.com/mydemo/? If from a subdirectory, do something like this:

ng build --prod --base-href /mydemo/

answered Mar 15, 2018 at 5:12

kshetline

14k6 gold badges49 silver badges96 bronze badges

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

Comments

Kashif Sohail · Accepted Answer · 2018-03-15 05:13:08Z

1

You need to add a .htaccess file (in the same directory where the index.html resides) with the following contents.

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

This piece of code makes use of the mod_rewrite module from Apache, so make sure you have this enabled

answered Mar 15, 2018 at 5:13

Kashif Sohail

3042 silver badges6 bronze badges

1 Comment

paulsm4 Over a year ago

You ALSO need to enable ` AllowOverride All` for the corresponding `<Directory> in the Apache .conf file

Collectives™ on Stack Overflow

deploying angular 2 app on Apache server

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related