Unable to deploy Angular 5 using dist folder in WAMP server

Question

I am unable to make my angular 5 app work in WAMP server. I have read many other stack overflow posts and tried a few options.

Steps to produce dist folder :

step 1 - ng build --prod --base-href "/dist/".

step 2 : Copy the dist/* files to DOCUMENT_ROOT.

dist in root folder

enter image description here

step 3 - restarted WAMP server

Step 4 - localhost . dist folder shows in WAMP

enter image description here

step 5 :localhost/dist and localhost/dist/index.html - nothing works

step 6: I changed base href to "/dist/" and restarted WAMP - This opened index file Dint work

step 7 - based on deployment method given in angular site -https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

i created .htaccess file and copied the following code and have put the file in the dist folder enter image description here

enter image description here

Still routing not working . Please please help. struggling with this for last 3 days !

• Ulrich Dohou: use /dist instead of /dist/
• dango: Thank you @ulrich - Not working - I tried 1. creating new dist folder using - ng build --prod --build-href "/dist" - Checked my index.html file but base href was still "/". 2. Changed base href from "/" to "/dis" in index file myself, restarted the wamp server. still no output.
• Ulrich Dohou: Which version of CLI are you using ? Do you get a warning when setitng the base-href ?

Answer 1

I just tried same thing on my end and it worked. Here is what I did. First I upgraded the Angular CLI to the latest one.

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

Then i was able to make a build with a custom baseHref and you can also specify a deploy-url( this option will only work for the files generated by the CLI not the files you have included on you assets). By the way to avoid any issue when you want to include a static file in your index file the best option will be doing this way (you add ./ front of the file)

<script src="./assets/bower_components/underscore/underscore-min.js" type="text/javascript"></script>

Finaly the option I have used to make the build is this :

ng build --prod --base-href /dist --deploy-url ./

When I make the build and put it inside my MAMP/WAMP/XAMP it works file

• dango: Thank you again Ulrich to help me on this. Two questions there:1. I dint get your point - ( this option will only work for the files generated by the CLI not the files you have included on you assets). what do you mean here. sorry but I dint get it. 2. what is use of including the static file - <script src="./assets/bower_components/underscore/underscore-min.js" type="text/javascript"></script> in the index ?