Moving angular 2 application to apache server environtment make error

Question

I have create an angular 2 application using the angular-cli like as follow

ng new my-angualr-app

after thay I have build this application on the production mode

ng build --prod

the I got the dist folder.

Finally I move the folder to my apache servers var/www/html directory but the angular 2 application is not working fine.

I could not figureout the issue. Why this is not working. The application working fine on the production mode in local environment, while running the command ng serve --prod

The console error output is here

The Network tab shows 404 status. But the files are resides in the same directory

You might need something like http://krasimirtsonev.com/blog/article/apache-htaccess-for-html5-push-state-manipulations — Günter Zöchbauer, Nov 23 '16 at 06:50
Dup of http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Nov 23 '16 at 06:52
Try enabling `HashLocationStrategy` like explained in the link "Dup of ..." (` providers: [{provide: LocationStrategy, useClass: PathLocationStrategy]` and tell us if you still get the error. — Günter Zöchbauer, Nov 23 '16 at 07:18
Still I got the same 404 the files css and js not found error — nifCody, Nov 23 '16 at 07:55
It works when I put all files into my Apache server /www/html directory directly but it fails when i keep all files on /www/html/dist folder. Why it is happen — nifCody, Nov 23 '16 at 08:10
Then you need to set the `` in the `` element or provide `APP_BASE_HREF` like explained in http://stackoverflow.com/questions/34535163/angular-2-router-no-base-href-set/34535256#34535256 (and like mentioned in the answer below) — Günter Zöchbauer, Nov 23 '16 at 08:12

Fiddles · Answer 1 · 2016-11-23T07:09:32.847

1

Instead of copying the dist folder, copy the contents of the dist folder, and make sure the base href is correct

edited Nov 23 '16 at 07:09

answered Nov 23 '16 at 06:55

Fiddles

2,790
1
32
35

The problem I found on the network tab is all the file below are hashed and the status of the files are 404 styles.d41d8cd98f00b204e9800998ecf8427e.bundle.css inline.d41d8cd98f00b204e980.bundle.js styles.b2328beb0372c051d06d.bundle.js main.6cc85e1296261ab75a89.bundle.js favicon.ico – nifCody Nov 23 '16 at 07:08
The solution is work for me copy the content instead of copy the /dist forlder. why it happens? – nifCody Nov 23 '16 at 08:24
It's hard to say without knowing more about your setup. Is your angular app being deployed to the root path? (ie. www.place.com, instead of www.place.com/virtualdir) Is your server doing routing rewrites to root for non-directories? – Fiddles Nov 24 '16 at 00:13

score 0 · Answer 2 · answered Nov 25 '16 at 16:52

I Think You are doing it in wrong way, I am sharing my way of doing-

First of all I use git for repository. So I push my angular2 code which was created by angular-cli. By default, The dist folder is not added in the repository. So I let it as it is.

After that, I clone my angular2 code in the production server in var/www/html and run the ng build --prod there. So, It creates the dist folder for the production server.

I think you can try in this way. It really works for me(in my several projects)

Moving angular 2 application to apache server environtment make error

The console error output is here

The Network tab shows 404 status. But the files are resides in the same directory

2 Answers2