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/
Related
I have multiple UI bundles.
My zuul yml entry
server
port : 8090
zuul:
routes:
ui:
url: http://localhost:8091
sensitive-headers:
When i try to hit url http://localhost:8090/ui
it loaded my html code but not include js and css file.
Thanks in advance.
I would want to have a closer look at the HTML that is returned when you go to the http://localhost:8090/ui. Or at least use Chrome developer tools to see what URL it is using when trying to load the JS and CSS. I had a similar issue with how Zuul does the routing. It is not a full reverse proxy in that it doesn't inspect the HTML body of the response to modify embedded URLs to be corrected.
Check out: https://github.com/spring-cloud/spring-cloud-netflix/issues/8
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
I have just generated an Spring/Angular app using JHipster.
I successfully accessed the home page by using this URL: http://localhost:8080 which redirects to http://localhost:8080/#/ and the index.html file is loaded properly.
I am not sure how Angular and the browser determine that they need to load the index.html file.
Where is this configured in a JHipster app?
edit: Is there some "default home page" configuration somewhere?
I successfully accessed the home page by using this URL:
http://localhost:8080 which redirects to http://localhost:8080/#/
The request to the server is for "/" and index.html is served. The "/#/" is all client side stuff (Angular routing) that happens when the javascript on the index.html page fires up, not the result of a server side redirect.
Where is this configured in a JHipster app?
This is a Spring Boot default, not something specific to JHipster. From the Spring Boot docs:
The auto-configuration adds the following features on top of Spring’s
defaults:
Static index.html support.
By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.
I don't think this is configurable through a property file or something similar, you'll have to write some code. See the answer to this question.
How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
However, S3 is storage, and doesn't offer the same redirection options
I have been trying to use the built in redirection rules such as
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>[[ your application's domain name ]]</HostName>
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
However, this just leads to a redirect loop.
Any suggestions?
In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).
You could change this:
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
with
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
More details on this answer: https://stackoverflow.com/a/16877231/1733117
You may also need to configure your app for using that prefix:
angular.module(...)
...
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
Make sure you have the index route configured for your website. Mostly it is index.html
Remove routing rules from S3 configurations
Put a Cloudfront in front of your S3 bucket.
Configure error page rules for your Cloudfront instance.
In the error rules specify:
Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200
Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.
https://stackoverflow.com/a/16877231/1733117
Doesn't really address the routing issue here.
here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains
S3 Static Website Hosting Route All Paths to Index.html
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.