AngularJs route reaload fails in nodeJs - node.js

Question

I managed to get an example app working following several examples, but theres a problem i cant seem to solve. In the angular app routes work ok like this:
- http://localhost:8888/#/login works
but when i reload the url i get the Cannot GET /login error from nodeJs.
i tried doing this:
app.get('/*', function (req, response) {
response.write(__dirname + '/../Client/index.html');
response.end();
});
and this
app.get('/login', function (req, response) {
console.log('*****************************************');
response.sendfile(path.resolve(__dirname + '/../Client/'));
});
but none work, i always get the same error and in the first one it just writes the url.
I think the problem is that while in the app angular knows the routing and handle the reloads because the file is served with
app.use('/', express.static(__dirname + '/../Client/'));
but when the url doesnt have the angular hashtag nodejs tries to look for the url but fails. is there a way i fix this? maybe redirecting to the correct url or something, i searched for hours trying stuff but none worked, thanks for taking your time.

Answer 1

The error is generated from the fact that Angular will rewrite the window.location at runtime while you are using your application starting from the root localhost/ and routing you to localhost/login (without calling the server with a GET).
So, when you refresh, the browser didn't know that the url was written by javascript, so he calls the node server that reject the request.
I other word: you need to start your navigation always from the root.. but this is unusable.
So I figure out how to develop a single project with Angular (4 in my case) for the front-end and nodejs-express for the back-and.
I've tested this solution for redirect with fragment from different source like auth0 and the use of JSON Web Token.
This let me to deploy this application easily to a single heroku instance.
NodeJs Configuration
The first middlewere have to be the path where the Angular's app is build
app.use(express.static(__dirname + './dist'));
Then I have configured express-jwt (the regular expression is for all the url that not starts with "/api")
app.use(expressJwt({secret: appConfig.SecurityJwt}).unless({
path: [
'/api/v1/login',
/^(?!\/api).*/gm
]
}));
Then the business logic of front end:
app.post('/api/v1/login', ...
app.get('/api/v1/myOtherServices' ....
And in the very end of routing configuration, even after the custom error handler:
app.use(appHandleError);
app.get('*', function (req, res) {
res.sendFile('index.html', {root: './dist'});
});
app.listen(4200);
Angular routing
I did not do anything particular here:
const routes: Routes = [
{path: 'home', component: LoginComponent},
{path: 'authenticated', component: ActivatePageComponent},
{path: '', redirectTo: '/home', pathMatch: 'full'}
];
#NgModule({
imports: [RouterModule.forRoot(routes, {useHash: false, enableTracing: false})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Then in the package.json I have made a custom script:
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng b --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng b --prod",
"buildAndStart": "ng build && npm start",
"i18n": "ng-xi18n --i18nFormat=xlf"
},
That I can launch with the command npm run buildAndStart so the angular project is builded and the server node is up and running.
My angular app will be listening to http://localhost:4200/ and all the rest service at the /api/* path as well.
So, for example, url like:
http://localhost:4200/authenticated#access_token=123
http://localhost:4200/authenticated?access_token=123
will be evaluated by Angular, and Angular can call all the /api/v1/myOtherServices without any problem, even the refresh/reload will not generate any error this time.