How to run builded Angular application without Not found error

When you are trying to build an angular application with routing you get a Not found or internal error will get. This can be overcome by an .htaccess file.

If you are running the application in the shared host with root directory then you just build the application with command as

    ng build --aot --prod --base-href /

And if you are running the application in the shared host with sub folder directory then you just build the application with command as

    ng builld --aot --prod --base-href /subfoldername/

And next if you are using angular 6 or greater then on the dist folder their has a folder having another folder having name as your project name. With in that folder create a .htaccess file. In that file add the below content.

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]


# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]




# Enable Compression
<IfModule mod_deflate.c>  
  	AddOutputFilterByType DEFLATE application/javascript
  	AddOutputFilterByType DEFLATE application/rss+xml
  	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  	AddOutputFilterByType DEFLATE application/x-font
  	AddOutputFilterByType DEFLATE application/x-font-opentype
  	AddOutputFilterByType DEFLATE application/x-font-otf
  	AddOutputFilterByType DEFLATE application/x-font-truetype
  	AddOutputFilterByType DEFLATE application/x-font-ttf
  	AddOutputFilterByType DEFLATE application/x-javascript
  	AddOutputFilterByType DEFLATE application/xhtml+xml
  	AddOutputFilterByType DEFLATE application/xml
  	AddOutputFilterByType DEFLATE font/opentype
  	AddOutputFilterByType DEFLATE font/otf
  	AddOutputFilterByType DEFLATE font/ttf
  	AddOutputFilterByType DEFLATE image/svg+xml
  	AddOutputFilterByType DEFLATE image/x-icon
  	AddOutputFilterByType DEFLATE text/css
  	AddOutputFilterByType DEFLATE text/html
  	AddOutputFilterByType DEFLATE text/javascript
  	AddOutputFilterByType DEFLATE text/plain
</IfModule>  
<IfModule mod_gzip.c>  
  	mod_gzip_on Yes
  	mod_gzip_dechunk Yes
  	mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  	mod_gzip_item_include handler ^cgi-script$
  	mod_gzip_item_include mime ^text/.*
  	mod_gzip_item_include mime ^application/x-javascript.*
  	mod_gzip_item_exclude mime ^image/.*
  	mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>


# Leverage Browser Caching
<IfModule mod_expires.c>  
  	ExpiresActive On
  	ExpiresByType image/jpg "access 1 year"
  	ExpiresByType image/jpeg "access 1 year"
  	ExpiresByType image/gif "access 1 year"
  	ExpiresByType image/png "access 1 year"
  	ExpiresByType text/css "access 1 month"
  	ExpiresByType text/html "access 1 month"
  	ExpiresByType application/pdf "access 1 month"
  	ExpiresByType text/x-javascript "access 1 month"
  	ExpiresByType application/x-shockwave-flash "access 1 month"
  	ExpiresByType image/x-icon "access 1 year"
  	ExpiresDefault "access 1 month"
</IfModule>  
<IfModule mod_headers.c>  
  	<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  		Header set Cache-Control "max-age=2678400, public"
  	</filesmatch>
  	<filesmatch "\.(html|htm)$">
  		Header set Cache-Control "max-age=7200, private, must-revalidate"
  	</filesmatch>
  	<filesmatch "\.(pdf)$">
  		Header set Cache-Control "max-age=86400, public"
  	</filesmatch>
  	<filesmatch "\.(js)$">
  		Header set Cache-Control "max-age=2678400, private"
  	</filesmatch>
</IfModule> 

By this method you can easily overcome the angular not found or internal error due to the routing can be resolved.

If you have any doubt don’t hesitate to comment here we will help you. 🙂