This question already has answers here:
AngularJS: How to remove #!/ (bang prefix) from URL?
(6 answers)
Closed 5 years ago.
I have setup a new Angular project using yeoman. Angular version is 1.6.0. Project setup was successful but I have been facing an issue with routing
Task runner - Grunt
When I run the project in local my local page will load with URL
http://localhost:9000/#!/
I was expecting http://localhost:9000/#/
When clicked on About link browser is routed to
http://localhost:9000/#!/%23%2Fabout
Expectation: http://localhost:9000/#/about
When I click home link browser is routed to
http://localhost:9000/#!/%23%2F
Expectation: http://localhost:9000/#/
What might be the issue? I have no such issues in my other system where I'm using AngularJS 1.5.8.
I got resolved with following code.You can write in your app.js file
$locationProvider.hashPrefix('');
Related
This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 9 months ago.
Routing of the app
Json package
i can't figure out why it's not rendering anything and shows 404 page if i manually navigate to other page
I had same problem once, The problem was that my webserver was serving "index.html" only for the root route ("/")
I configured the webserver in a way that all the routes (or only the ones that you are using) will serve index.hml. Please try to check this.
Based on the screenshot provided, it appears that the project https://packirisamykaran.github.io/daily-thoughts is hosted using GitHub pages. React Router can be used, but you would have to switch to hashHistory instead of browserHistory so that it works with GitHub Pages.
The Notes on client-side routing from the create-react-app.dev website basically provide two options as workarounds:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.
Thanks to #DrewReese, for clarifying this.
This question already has answers here:
React-router URLs don't work when refreshing or writing manually
(55 answers)
Closed 2 years ago.
My single-spa contains 4 react applications. Each has its own react-router-dom. If I hit browser refresh from one of the 4 applications it says page not found. Application is deployed in the apache server in Linux OS.
I don't know whether I'm missing any configuration in the base application. It works fine in the development server which is webpack and node.
Yes, because your deployed application is not aware of the routes. In single page applications, only your / route exists. All routes in SPAs are client side routes and don't make seperate GET request to the server.
I faced the same issue when deploying my application to netlify. It showed default netlify 404 page. Then I added _redirects file to public directory with following contents:
/* /index.html 200
This redirected all 404 routes to default index.html and thus used the client side routing. You need to find something similar for your deployed version.
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
I have a problem using pdfMake.js library. This library is supposed to generate PDF, client-side only.
It works well with chrome, Firefox...
But when I launch my ionic app on a device (Android in my case), I have the following error :
CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to non-allowed URL: data:application/pdf;base64,JVBERi0xLjMKJf39/f0KNiAwIG9iago8PAovVHlwZSAvRXh0R1.......
I encountered this problem before with AngularJs for example for Blobs...and using the following configuration worked :
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|blob):/);
BUT not here... :(
Do you have any idea how to allow the data/pdf ?
Thanks !
You have to add permissions to your App inside manifest.xml file
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.