I'm not sure if I have used the right terminology here but Is there a way I can get the base URL of my app?
My problem Is I have a login service that has a hardcoded redirectUrl now when I'm in development, I'm obviously using http://localhost:4200 but when I've published I'm using my website name https://mywebsite.com now Is there a way I can grab that and not anything after so like If I go to https://mywebsite.com/thisadad I only get back https://mywebsite.com?
Now I know I could have a function on the ngOnit of my app.component where I grab the URL on first load pass it to a service and then use it throughout the app but that wont work If I say enter the page at https://mywebsite.com/newpage is there a better way to do this??
The reason I'm using a hardcoded redirect is because I'm using auth0 as my authetication
Any help would be appreciated
If i understand the situation currently,
In your case you should use a global variable named
'environment'.
Which you configure during build ( ng build )
More on this in this article:
https://medium.com/beautiful-angular/angular-2-and-environment-variables-59c57ba643be
Related
TLDR; Is there a way to directly redirect to a module while running the serverside code? Taking into account the modules filter settings etc.
Hello, quite new to SN so sorry for the newbi question :)
Basically I need to redirect the user to a different module after running some serverside code.
The module have some filter setting set in "Link type". Guess I could copy these and hard code them into the redirect via action.setRedirectURL(), but that wouldn't update should the modules filter change.
Help would be much appreciated, thank you :)
I've done something similar so that records could be opened in a new window. This UI action will open a knowledge article in kb portal.
function openRecordInKBPortal() {
var url = 'kb?id=kb_article&sys_id=' + g_form.getUniqueValue();
g_navigation.openPopup(url);
}
I created a React app which has four routes, user,admin,home and bus.
if I want to access http://localhost:300/user I was able to access that,
but after hosting it on Github( https://loveyourtrip.tk/ ), if I want to access https://loveyourtrip.tk/user , GitHub throws error status code 404.
However, I can log on https://loveyourtrip.tk/ . once I log on this URL, there is a button called "mange account". if you click there , you can see user. once clicked on user , you can go to https://loveyourtrip.tk/user. but I am not able to access it directly. How can I resolve this issue?
It's because you didn't handle the /user in the backend.
You can handle the whole thing from the front end by using HashRouter instead of BrowserRouter.
Or you can handle it from the backend by return the html page to all the routes.
Take a look at this https://stackblitz.com/edit/hashrouter-demo
I have a SPA application developed using AngularJS. Access to the application can take place in two ways:
1) By entering the address (example) www.example.com, or
2) By clicking on a link like http://www.example.com?do=this¶m=1234
When the application is started, it examines the URL and, if suitable parameters are found, it prompts the user to log-in/register and then goes to a specific page within the application where the visitor is supposed to perform some activities related to the action this with parameter 1234.
Traversal through pages is handled by the javascript command:
$window.location.href="#/other_page;.
This works ok so far, except that the URL is kept with the parameters. As such, whenever the application decides that it needs to go to another page, the URL (in the address bar of the browser) would look like:
http://www.example.com?do=this¶m=1234#/other_page
which is messing the behavior of the application.
My question is: Once I was able to extract from the original URL the received parameters, I want to clean the url and proceed with its normal contents, which would be something like:
http://www.example.com#/other_page.
How can this be achieved?
Thanks in advance.
Using $location service clear the search query params from address bar of the browser.
Syntax is:
$location.search({});
For Example After finished your login or register page.
$scope.login = function(){
// Check your logic and clear search params
if($routeParams && $routeParams.src)
{
$location.search({});
$location.path($scope.baseurl+$routeParams.src);
}
};
Here am using $routeParams service you could also check $window.location.search
You can use $location service. It says:
Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.
So, basically you can do:
$location.path('other_page')
which should clear the URL and set this path instead.
Just found a working solution. I use the following command:
$window.location.href = location.protocol +
"//" +
location.host +
"/index.html#/other_page" ;
which makes the trick. Perhaps not the most elegant, but it works as needed.
Thank you guys (#vivek and #prakashA) for your support.
I try to build a multi-tenant SPA using Aurelia where the tenant is given as:
http://myapp.example.org/tenant1
http://myapp.example.org/tenant2
http://myapp.example.org/tenant3
How can I return the same index.html for all of these urls (while being able to extract the tenant in the SPA code for Oauth2 login)?
I have made similar AngularJs solutions but then I used a "trick" by implementing a Asp.net web api that accepted a {tenant} route. Is there a simple "all Javascript" Aurelia way of doing this?
The only way to "redirect" all those pages to index without changing the URL is by doing it in the server, with a URL rewrite. The thing you did in ASP.NET MVC was exactly that.
If you want to do that only with javascript, you'll need to redirect all those pages to index and pass the tenant as a parameter. For example:
location.href = location.host + "/?tenant=" + location.search;
The problem here is: by doing that, you'll really need all those tenant pages phisically, what I suppose it's not what you want.
There is another try: you can also make a default 404 page and then make that redirect from there, but you'll throw an 404 error to the client, what I don't think it's good at all.
So, if you're using IIS or any other server, you should just do a rewrite and everything is gonna be ok.
If you're using NodeJS or .NET you can see how to do it directly from the Aurelia's documentation.
http://aurelia.io/docs.html#configuring-push-state
I currently have a set-up based on the meanjs stack boilerplate where I can have users logged in this state of being 'logged-in' stays as I navigate the URLs of the site. This is due to holding the user object in a Service which becomes globally available.
However this only works if I navigate from my base root, i.e. from '/' and by navigation only within my app.
If I manually enter a URL such as '/page1' it loses the global user object, however if I go to my root homepage and navigate to '/page1' via the site. Then it's fine, it sees the global user object in the Service object.
So I guess this happens due to the full page refresh which loses the global value where is navigating via the site does not do a refresh so you keep all your variables.
Some things to note:
I have enabled HTML5Mode, using prefix of '!'.
I use UI-Router
I use a tag with '/'
I have a re-write rule on express that after loading all my routes, I have one last route that takes all '/*' to and sends back the root index.html file, as that is where the angularjs stuff is.
I'm just wondering what people generally do here? Do they revert the standard cookies and local storage solutions? I'm fairly new to angular so I am guessing there are libraries out there for this.
I just would like to know what the recommended way to deal with this or what the majority do, just so I am aligned in the right way and angular way I suppose.
Update:
If I manually navigate to another URL on my site via the address bar, I lose my user state, however if I manually go back to my root via the address bar, my user state is seen again, so it is not simply about loosing state on window refresh. So it seems it is related to code running on root URL.
I have an express re-write that manually entered URLs (due to HTML5 Location Mode) should return the index.html first as it contains the AngularJs files and then the UI-Route takes over and routes it properly.
So I would have expected that any code on the root would have executed anyway, so it should be similar to navigating via the site or typing in the address bar. I must be missing something about Angular that has this effect.
Update 2
Right so more investigation lead me to this:
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
Which is a server side code for index.html, I guess this is not run when refreshing the page to a new page via a manual URL.
Using the hash bang mode, it works, which is because with hash bang mode, even I type a URL in the browser, it does not cause a refresh, where as using HTML5 Mode, it does refresh. So right now the solution I can think of is using sessionStorage.
Unless there better alternatives?
Update 3:
It seems the best way to handle this when using HTML5Mode is that you just have to have a re-write on the express server and few other things.
I think you have it right, but you may want to look at all the routes that your app may need and just consider some basic structure (api, user, session, partials etc). It just seems like one of those issues where it's as complicated as you want to let it become.
As far as the best practice you can follow the angular-fullstack-generator or the meanio project.
What you are doing looks closest to the mean.io mostly because they also use the ui-router, although they seem to have kept the hashbang and it looks like of more of an SEO friendly with some independant SPA page(s) capability.
You can probably install it and find the code before I explained it here so -
npm install -g meanio
mean init name
cd [name] && npm install
The angular-fullstack looks like this which is a good example of a more typical routing:
// Server API Routes
app.route('/api/awesomeThings')
.get(api.awesomeThings);
app.route('/api/users')
.post(users.create)
.put(users.changePassword);
app.route('/api/users/me')
.get(users.me);
app.route('/api/users/:id')
.get(users.show);
app.route('/api/session')
.post(session.login)
.delete(session.logout);
// All undefined api routes should return a 404
app.route('/api/*')
.get(function(req, res) {
res.send(404);
});
// All other routes to use Angular routing in app/scripts/app.js
app.route('/partials/*')
.get(index.partials);
app.route('/*')
.get( middleware.setUserCookie, index.index);
The partials are then found with some regex for simplicity and delivered without rendering like:
var path = require('path');
exports.partials = function(req, res) {
var stripped = req.url.split('.')[0];
var requestedView = path.join('./', stripped);
res.render(requestedView, function(err, html) {
if(err) {
console.log("Error rendering partial '" + requestedView + "'\n", err);
res.status(404);
res.send(404);
} else {
res.send(html);
}
});
};
And the index is rendered:
exports.index = function(req, res) {
res.render('index');
};
In the end I did have quite a bit of trouble but managed to get it to work by doing few things that can be broken down in to steps, which apply to those who are using HTML5Mode.
1) After enabling HTML5Mode in Angular, set a re-write on your server so that it sends back your index.html that contains the Angular src js files. Note, this re-write should be at the end after your static files and normal server routes (e.g. after your REST API routes).
2) Make sure that angular routes are not the same as your server routes. So if you have a front-end state /user/account, then do not have a server route /user/account otherwise it will not get called, change your server-side route to something like /api/v1/server/route.
3) For all anchor tags in your front-end that are meant to trigger a direct call to the server without having to go through Angular state/route, make sure you add a 'target=_self'.