This error started showing herself after I added $locationProvider.html5Mode(true) to my state config on AngularJS:
'Cannot GET error' after refreshing page with html5mode
I`ve searched for it and found this fix to server side but it doesn't work either because of some JSON errors:( Maybe someone know how to properly fix it witout making new errors?)
app.get('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
Try changing your code to the below:
app.all('/*', function(req, res) {
res.sendFile('index.html', { root: __dirname + '/public/index.html' });
});
Related
How can I solve this issue?
I tried to use axios so I can make a request to /logout but it just doesn't work and I tried it using postman and the result is the same. I also have /login and it works well
// LOGOUT
app.get("/logout", (req, res) => {
req.logout();
});
package.json in my client(maybe you need this)
"proxy": "http://127.0.0.1:4444",
this req. won't work
axios({
method: 'get',
url: '/logout',
withCredentials: true,
}).then(res => {
localStorage.removeItem('isAuthenticated');
return res.data;
});
app.get("/logout", (req, res) => {
req.logout();
res.json({ message: "Successfully logged out" }); // added this and it worked for me
});
I just added that line of code, I found it somewhere and tried and it worked, to be honest, I don't know why it works.
The problem was probably in "req.logout()" code, if I delete it, it will work fine but with that line the error comes. I read about how to correctly logout user from passport.js and found that line of code and used it.
Okay so this question originates from this post, which is also my question but sorta moved onto this problem.
Now the problem is, my angular app works but when it comes to Node routes, like /login, the browser thinks it's an Angular route. The browser does detect it as a Node route when I refresh the whole page but not when I am navigating the site once Angular routing has kicked in.
Long story short, here are my route files:
require('./routes/routes.js')(express, app);
require('./routes/default.js')(express, app);
routes.js file:
module.exports = function(express, app){
var router = express.Router();
router.get('/', function(req, res){
res.render('index');
});
router.get('/login', function(req, res){
if (req.isAuthenticated()){
res.render('index');
} else {
res.render('login');
}
});
default.js:
module.exports = function(express, app, passport, Promise){
var defaultRouter = express.Router();
defaultRouter.get('/*', function(req, res, next) {
res.render('./views/index.html');
});
};
Your help will be very much appreciated.
Thanks
I gave up on making this work on the root URL so I added /index to the baseURL like this:
index.html file:
<head>
<base href="/index/">
</head>
The, I added a catch all to the routes.js file, as below:
module.exports = function(express, app){
var router = express.Router();
router.get('*', function(req, res, next) {
if(req.url == '/' || req.url == '/login'){
next();
} else {
res.sendfile('./views/index.html');
}
});
router.get('/', function(req, res){
res.render('index');
});
router.get('/login', function(req, res){
if (req.isAuthenticated()){
res.render('index');
} else {
res.render('login');
}
});
With the angular file of course having this:
$locationProvider.html5Mode({
enabled: true,
requireBase: true
}).hashPrefix('');
And there. It works like a charm now.
I hope this helps whoever are in my shoes.
This is my first attempt at using Socket.io
I'm creating an api to emit some data. It work's fine.
Here is the code I think needs to be modified :
app.use(express.static(__dirname + '/node_modules'));
app.get('/', function(req, res,next) {
res.sendFile(__dirname + '/index.html');
res.setHeader('Access-Control-Allow-Origin', '*');
});
In reference to the above code, the data is being successfully emitted to the index.html file. The port I have used is 4200. So if I enter localhost:4200 in the browser I'm able to see the data being displayed in the index.html file. Now I want to use localhost:4200 in my angular js project to get the data but instead I get the html contents of the index.html file.
Here is the snippet from my angularjs code:
setInterval(function(){
$http.get("localhost:4200").success(function(response) {
console.log(response);
})
}, 500);
What I'm I doing wrong here?
I was able to get it to work by adding the following angular snippet :
$scope.server = "100.20.32.20"; //Ip of my machine
$scope.socket = io('http://' + server + ':4200');
socket.on('broad', function(data) {
console.log($scope.data);});
I am a newbie of angularjs. My version is 1.6.4 using with nodeJS. I am following this tutorial for file upload leon/angular-upload. I did all the steps written here to make it work which are.
1) bower install --save angular-upload
2) Add module dependency "lr.upload" which i did
angular.module(__appName, ["ngMap", "multipleSelect", "lr.upload"]);
3) Add this code snippet in html page, so i did in my fileupload.html.
<div class="btn btn-primary btn-upload"
upload-button
url="/upload"
on-success="onSuccess(response)"
on-error="onError(response)">Upload</div>
4) And finally add script to html page.
<script src='bower_components/angular-upload/angular-upload.min.js'></script>
But i am still getting error:
POST http://localhost:3000/upload 404 (Not Found)
My server.js is code is:
var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get("/", function(req, res){
res.redirect("app/index.html");
});
app.listen(3000, function(){
console.log("Tellworld web app listening on port 3000");
})
Here is Server.JS files that you should follow
https://github.com/leon/angular-upload/blob/master/example/server.js
You have to add :
app.post('/upload', function(req, res) { /*do your post processing here */ })
Your server will also need it route that receive request from the angular's route directive. In clear english you will need to declare a route pointing to upload in your server which may look like the code below
app.post('/upload', function(req, res){
console.log(req.body); //this is just to show the request body on your console
});
I'm trying to use html5 mode in Angular JS app for sake of SEO. However, I faced the problem for Express serving index.html to request. The deep linking didn't work and cannot refresh page.
App.js
app.use(serveStatic(path.join(__dirname, 'public')));
app.use(serveStatic(path.join(__dirname, 'node_modules')));
app.use(serveStatic(path.join(__dirname, 'app_client')));
app.use('/api', routesApi);
app.all('/*', function(req, res, next) {
res.sendFile('./app_client/index.html', { root: __dirname });
console.log("send index");
});
I already try many researches from many sources, approach such as
app.get('/', function(req, res) {
res.sendFile('index.html');
});
or
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'app_client', 'index.html'));
});
or
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/index.html')
});
None seems to work. I know that something must be wrong in my code, but i don't know where.
Found answer at lasts
app.get('/*', function(req, res, next) {
res.sendFile(__dirname + '/app_client/index.html');
}