CODEWITHSUNDEEP
angulartomcatangular6production-environment
Aniket Avhad
Aniket Avhad

Reputation: 4145

Refresh The browser Angular app is not working. giving 404 error when I deployed the app in to apache tomcat

I'm trying to figure out the way how to setup Apache Tomcat server to serve angular application on page refresh.

Routing will work only when i click but if enter path manually or if i do page refresh then its give me the 404 error.

HTTP Status 404 – Not Found

1) Build angular application with:

ng build --prod --base-href ./

2) Also i added Rewrite rule in apache tomcat

In $ApacheLocation/conf/context.xml

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

In $ApacheLocation/conf/server.xml

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

But its not working for me.

I would appreciate any help.

Upvotes: 2

Views: 6199

Answers (5)

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3021

You have just configure the RewriteValve in server.xml. In addition to this you need to write the rewrite rule in rewrite.config.

rewrite.config - 

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html

The above rule is telling tomcat to redirect any request (deep linked request) to the index.html of the application. From here angular will take over and route to the correct component to be displayed.

I would suggest to host the application in a separate context path on tomcat rather than at the root. the configurations needed for this is explained in details on this blog - Fixing deep linking issue – Deploying angular application on Tomcat server

Upvotes: 0

Eeshwar Ankathi
Eeshwar Ankathi

Reputation: 266

You can use HashLocationStrategy as below in app.module.ts

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],

By using the hash location strategy, your application context and routes will be separated by a Hash(#) as in http://localhost:4200/myapp/#/route.

This way the 404 error will be resolved. we also have PathLocationStrategy but I was not able to get it to work.

Upvotes: -2

Aniket Avhad
Aniket Avhad

Reputation: 4145

I got the solution to my question and i solved the problem.

Here's the step that, how i resolved the problem.

1) Created "WEB-INF/web.xml" in my angular src folder, the path is as follows

Your_Folder/src/WEB-INF/web.xml

2) In web.xml i added below lines,

<web-app> 
    <error-page> 
        <error-code>404</error-code> 
        <location>/index.html</location> 
    </error-page> 
</web-app>

3) Add external folder into angular.json so can while building application it will be available into dist folder,

In angular.json

"assets": [ "src/assets","src/favicon.ico","src/WEB-INF" ]

4) Build the application with below command,

ng build --prod --base-href=/myApp/

5) Rename the dist folder with base-href name

6) Copy the dist or base-href folder and paste into 

apache-tomcat-8.5.37/webapps

7) Start the tomcat and your application will run, even after refresh the browser.

Upvotes: 6

Gopal
Gopal

Reputation: 673

I too had the same problem. Let me tell how I solved the problem.

create WEB-INF folder in your project folder. and create rewrite.config file.

/WEB-INF/rewrite.config

RewriteCond %{SERVLET_PATH} !-f
RewriteRule ^/(.*)$ /index.html [L]

Upvotes: 0

Yew Hong Tat
Yew Hong Tat

Reputation: 694

I'm not an expert for Apache but here's what I found. Add a rewrite rule to the .htaccess file as shown 

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

You can read more in https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/ or https://angular.io/guide/deployment#fallback-configuration-examples

Upvotes: 1

Related Questions