Angularjs app refresh with tomcat going to 404 page - angularjs

I have deployed angular app in tomcat7.
What did :
1 Made angular app as an html5 mode to true by adding fallowing code in app.js
if (window.history && window.history.pushState) {
$locationProvider.html5Mode(true);
};
2. Added `<base href="/dist/#/">` in index.html
2. Build the app by using grunt `grunt build`
3. Kept the dist into the folder `TOMCAT_HOME/webapp/ROOT`
Problem :
1. When i refresh the page it show 404
2. When I copy the URL and paste then also it's giving 404 error.
3. Provide me link for tomcat configurations
Note : If i hit the browser with Host/dist app is running (if i navigate state by state).
Please help me where i did mistake. And how to resolve it (with tomcat sever configuration if required).
URL's I fallowed :
Deploy AngularJS app on tomcat
http://diveintohtml5.info/examples/history/fer.html
Removing the fragment identifier from AngularJS urls (# symbol)

Not sure if you are still looking for the answer, but I will share my solution in case anyone needs it.
What I did was basically use http://tuckey.org/urlrewrite/
and set the rule as
<rule>
<from>^/search/$</from>
<to>index.html</to>
</rule>
I want to point out that I used the actual file name instead of the url I want to go.
Hope this helps!
Regards,
Berkan

Related

If I refresh the browser my react app are being page not supported error message

I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/

How to use legacy web site and ReactJS both?

I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.

Angular 2 cli deployment to Github Pages not working.. js file not found

I am unable to deploy my angular 2 app with angular cli:
angular-cli: 1.0.0-beta.14
node: 6.4.0
os: darwin x64
The deployed site logs error messages telling that the inline.js, main...bundle.js, styles...bundle.js, favicon.ico Failed to load with status 404.
Everything works fine locally but problem starts when in production deploying to Github pages.
The base href is also properly set. May be a problem in CSP???
Kindly guide(Already lost 2 days) Error Screenshot
Actually I sorted out it just now!
I see that when site is deployed using the ng github-pages:deploy, the site that is generated will have site url like:
xyz.github.io/ng-app
and also the base url will be set like ng-app. Thing I did was set a variable baseUrl: "/ngApp" and set the base url to <base href="{{baseURL}}"> and everything is working now. I guessed that it picked up the app name specified in the angular-cli.json and so it did not match the repo name in github etc... thanks #shusson anyway

Spring MVC and AngularJS routing conflict

Hi Guys.
I have problem with routing between Spring MVC and AngularJS.
So, when I got homepage : http://localhost:8080/ captures that Angular and its ok but when i want go to another page e.g http://localhost:8080/dashboard captures that Spring MVC and Tomcat show error 404 Not Found.
To get to dashboard in need use url /#/dashbaord
Although i got below code in my file with routing configuration.
It is possible to angular was first taken into consideration and next Spring MVC?
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
Regards
You need to route all Tomcat URLs to index.html
For API calls to Spring Boot http://localhost:8080/springbootapi/wotever
And in Tomcat say DO NOT POINT ANY URL WITH /springbootapi/ in it to index.html
EVERYTHING ELSE TO index.html
Pointing everything else to index.html gives Angular full control over everything except API calls
The above outline the generic approach to do this.
Maybe better to follow this tutorial ...
https://spring.io/guides/gs/consuming-rest-angularjs/

Backbone routes break on refresh with Yeoman

I am building an app with Backbone and Yeoman. I am having an issue with the routing.
I have the following routes set up:
'test' : testMethod,
'' : index
I have set up pushstate:
Backbone.history.start({pushState: true});
I am using Chrome
If enter myApp.com#test the url changes to myApp.com/test and testMethod() fires correctly.
However if I try goto myApp.com/test directly or refresh after the browser has changed the url from # to / then I get a 404.
I am using the Yeoman built in server to test the pages. Could this be causing the issue?
I am not sure if you are using BBB within Yeoman. If you are, this should not be an issue. If you are not using BBB, this is a known issue. BBB has it's rewrite rules setup correctly to use pushstate, but yeoman's built in server does not seem to adopt this. You could edit your grunt.js file with your own rewrite rules to get pushstate working correctly. Some of the users in the above mentioned link have done this successfully.
When your app goes live, you will either need to serve those urls through your server or edit your rewrite rules to do the same. If the latter, and your application relies on SEO, SEO will suffer greatly.

Resources