Thinktecture IdentityServer V3 - Data is not binding and resources are not loading - angularjs

I've recently created an Web API that I'd like secured by Thinktecture's IdentityServer V3. I imported the package from nuget, and was able to hit the token endpoints to create a token. However, I noticed that the bootstrap css would not load on IS's main page:
This is how it appears i.imgur.com/DftMQ7C.png vs https:/demo.getidentityserver.com
It didn't bother me until I started using the views (and not just the endpoints) where my pages would print the variable names and function incorrectly with the resources not loading properly. Like so.
Of course, I can not log in since it redirects me the literal "loginUrl" page. I've tried reverting to the previous version 1.2.1, but I still have the same issue. Alternatively, I've looked at samples and those don't have the same issue at all, so I'm wondering if there's a config in my API project that may be causing this.
Has anyone encountered this problem or know of a potential fix?

Be sure to read through the documentation thoroughly, guys. Lesson learned. I just needed to add RAMMFAR to my web.config "otherwise some of the embedded assets will not be loaded correctly by IIS"
<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
</system.webServer>

Related

How to add a Docusaurus website within Next.js Website as a route

Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.

Load index.html for every possible route of my React SPA that is hosted on digitalocean spaces

I use digital ocean space and CDN to host a React SPA. When hitting with a browser the url [host]/index.html it works fine. However hitting [host]/index.html/customers/one or any other subpaths, returns a 404. Currently, any reload on any subpath returns that 404. Last, I use terraform to update the SPA artifacts on DO spaces and I have tried to add a website_redirect="/index.html" to all the bucket objects (js, html and css) but with no success (more info if necessary here). And to be completely honest I am not sure I understand that option in the terraform digitalocean provider. I might be using it completely wrong.
Now, I have seen that question in multiple places but never with a clear answer.
Here is one on digitalocean community (https://www.digitalocean.com/community/questions/is-it-possible-to-send-a-301-redirect-for-bucket-objects) where no answer is provided but the issue seems to be similar.
There is a similar question on SO without an approved answer Redirect wrong URL/path DigitalOcean Spaces
This is a DO idea that is somewhat related https://ideas.digitalocean.com/ideas/DO-I-318
Is there a way to achieve the mentioned goal of loading index.html for every route with DO space + CDN and let the app parse the rest of the path to display the right component subtree of the react app?

Having conflict with Django URL and Angular Route

I am currently working on a project using Django and Angular. I am trying to implement Django's Password-Reset app, which seems pretty easy to set up. I followed the instructions and I ran into a peculiar issue that is caused by Angular's routing. I am trying to link to a FormView using
Forgot password?
But it seems that Angular's routing keeps picking up the literal translation of the link
http://127.0.0.1:8000/%7B%%20url%20'password_reset_recover'%20%%7D
This of course causes a routing error to pop up.
Is there anyway I can link to this view without Angular interfering?
Looks like the problem is that Django is not parsing your URL tag in the template. Might want to look into that rather than into Angular
Could you check the a tag in your Developer tools and see what it says? Chances are that it says exactly what the URL is pointing to.i.e. /%7B%%20url%20'password_reset_recover'%20%%7D
Have you added password_reset_recover in your root urls.py?

Api calls are blocked by $urlRouterProvider.otherwise('/') if the API is in the same project

Until the end of my Angular application development period, I worked with two seperate projects. WebApi and Angular SPA.
Now I am trying to deploy them to our production server and because of the need for seperate SSL certificates, we decided to combine them and run in the same Project. So far so good...
I managed to combine them together and the server side code compiles. Now when I run the app, the first call to the API results in a parse error with the homepage contents (full of html). I understand that this is due to the $urlRouterProvider 's otherwise attribute, routing all the non-routed paths to the root "/".
I need to fix it, excluding the paths which includes /api in them in order to bypass Angular's routing system out of API's way. Any ideas to help?
EDIT: New project is a combination of WebApi (v2 - Asp.Net) and Client App (Angular v1.3.15 on MVC5 views. And yes, html5Mode(true) but doesn't change a thing if turned off).
EDIT2: Forgot to mention, the error is raised from a jQuery ajax call, outside the angular scope. :$
As interesting it is, I realized some other abnormalities in the way WebApi worked. Did some research and found out that it's because of the latest EntityFramework (v6.1.3). During my merge, I updated EF from v6.1.1 so uninstalled and 6.1.3 and installed back 6.1.1 and the problem is solved! That is very odd. EF 6.1.3 should have been a solid release without any breaking changes. Very odd...
Thanks to all who commented and tried to help.
EDIT: After some time, what I realized is this. EF models should be in sync with the Database in order to make successful database calls from WebApi. When I make an ajax call and the db is not in sync with the models, the problems in the question occures. I hope that information helps someone.

AngularJS Access denied when loading partial in IE11

Background
I am attempting to develop an AngularJS app that is to be hosted as 'offline html' as part of the Resco MobileCRM software. This software provides offline access to CRM data via its own javascript libraries and this is working fine. I am also able to get a very simple angularjs application working, in terms of retrieving and displaying the data.
The AngularJS application is uploaded to the CRM using the Resco interface and then is download to each client machine via the resco software. The actual files end up in the users AppData folder on each client machine.
Problem
When I introduced routing to the angular app, either using ngRoute or ui-router, I am getting Access Denied errors. The resco software uses the underlying browser, which in my case is IE11. I have narrowed down the error to when angular is attempting to load the partials for the routes.
The offending code is below (angular.js v1.3.15 line 9805)
xhr.open(method, url, true);
From my research, it seems like IE believes I am attempting a CORS request, however I am just attempting to load a file from disk.
Various posts suggest I add the site to 'Trusted Sites', however I am not actually accessing another site. I also cannot host this on a web server as the whole purpose is to have this angular application accessible offline within the Resco MobileCRM application
I also get the same error if I navigate to the AppData folder and run the angularjs application directly from there (i.e. not in the resco application).
Other posts have suggested that I need to replace the XMLHttpRequest created by Angular with XDomainRequest but I am reluctant to change the angular library, especially if I don't understand why.
Would appreciate it if anyone could shed some light on why this is happening and how to fix it.
I have confirmed that this is not possible on any of the browsers. You cannot make xhr requests to files served locally from disk.
I got around this problem for directives by loading my 'partials' in to script tags and referring to the id of these script tags in the directives.
I did not try that with ui.router or ngRoute and instead opted to redesign my application in to a number of smaller application as they did not need to share any context

Resources