Deploy Angular 2 project in Subdirectory

Spread the love

Recently i was working on Angular 2 project using Angular-webpack starter template. When i was done developing whole project on my localhost. I build my project using “npm run build”. I tried loading the content of dist directory to one of my subdirectory on my hosting domain. As soon the upload is done, I got index.html at right place but every each link path is wrong like JS, CSS, Images, font-file etc. I Googled little bit but couldn’t able to find right solution at one place. So that’s why i thought of putting solving this riddle for anyone who will stuck on the same path.

In order to deploy Deploy Angular 2 project in subdirectory, following points needs to be taken care of :

Step1 : Change <base> link in index.html  to the directory link inside which you are uploading your files.

This link should be relative to root. Let’s suppose you are uploading your Final deployment files inside “public_html/dist” directory than <base> link will need to be changed as following:

Step2 : You also need to add some changes in “webpack.config.js” , so that all file path inside components, Style files, images paths get updated accordingly. Changes needs to be done in “config.output” as follow:

Path defines directory in which build files are finally kept on build. We changed “publicPath” production path from ‘/’ to ‘/dist/’. This will change all internal file path which are configured using webpack.

After applying above changes, you should be able to Deploying Angular 2 project in Subdirectory. Happy coding… 🙂



Leave a Reply

Your email address will not be published. Required fields are marked *