如何将Angular 2/4应用部署至共享虚拟主机？本地项目部署指南

Hey there! Let’s walk through exactly how to get your Angular 4 app live on a shared hosting provider, plus cover the general steps that work for any Angular 2/4 app.

First, you need to package your local Angular project into optimized, production-ready files—development builds are too bulky and slow for public deployment.

• Open your terminal, navigate to your project’s root directory.
• Run this command: ng build --prod

  This generates all the static files (HTML, minified CSS/JS, assets) you need in the dist folder of your project. For older Angular 4 versions, you might have added --aot manually, but modern --prod flags already include AOT compilation and code compression by default.

• After the build finishes, check the dist/[your-project-name] subfolder—all files inside here are what we’ll deploy.

Next, get those production files onto your hosting server:

• Locate your host’s web root directory—this is usually named public_html, www, or htdocs (varies by provider: Bluehost uses public_html, SiteGround uses public_html, etc.).
• Use an FTP tool (like FileZilla) or your host’s built-in file manager to upload all contents of dist/[your-project-name] directly into the web root. Don’t upload the entire project folder—just the files inside it, so visitors hitting your domain load index.html immediately.

  If you want to deploy the app under a subdirectory (e.g., yourdomain.com/my-app), create that subfolder in the web root first, then upload the files there.

If your app uses Angular’s RouterModule, you’ll likely hit 404 errors when refreshing pages—this is because shared hosts look for physical files matching the URL, but Angular’s routes are front-end-only. Here’s how to fix it:

• For Apache Servers: Create a .htaccess file in your web root and add this code:

  <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 redirects all requests that aren’t for actual files/folders to index.html, letting Angular handle the routing.
• For Nginx Servers: If your host uses Nginx, find your site’s config file (usually in /etc/nginx/sites-available/) and update the location block:

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  Restart Nginx after making changes.

  If your host won’t let you edit Nginx configs, switch Angular to hash-based routing instead: add useHash: true to your RouterModule setup, like RouterModule.forRoot(routes, {useHash: true}). This makes routes look like yourdomain.com/#/about, which won’t trigger server file searches.

Once everything’s uploaded, visit your domain to verify:

• The home page loads without errors
• All route links work as expected
• Refreshing any page doesn’t throw a 404
• Images, styles, and scripts load correctly

• You don’t need Node.js on your shared host! Angular builds are pure static files—any host that supports static file hosting will work.
• If your app calls external APIs, watch for CORS issues: either host the API on the same domain, enable CORS on the API server, or use your host’s reverse proxy (like Apache’s ProxyPass) to forward requests.
• If deploying to a subdirectory, set the base href during build with ng build --prod --base-href /my-app/—this ensures all asset paths point to the correct location.

内容的提问来源于stack exchange，提问作者Ajit Kumar