Unable to deploy Angular 5 using dist folder in WA

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 !

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