AngularJs路由重载在nodeJs中失败

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.