title: Express 4 + Angular 2 HTML 5 Routing Concerns
body: <p>I am making a basic web app with Express 4 and Angular 2. Here, there is nothing specific to Angular 2 besides the fact I am using its HTML 5 router.</p>
  
  <p>Here is the routing work flow of the app:</p>
  
  <p>There are two main server side routing configurations of the app. Both look similar to this:</p>
  
  <pre><code>/* GET home page. */
  router.get('/', authenticationHelpers.isAuth, function(req, res, next) {
    res.render('index');
  });
  
  /* GET login page. */
  router.get('/login', authenticationHelpers.isNotAuth, function(req, res, next) {
    res.render('login');
  });
  </code></pre>
  
  <p>These manage explicitly, the two cases in which a user routes to <code>/</code> and <code>/login</code>.</p>
  
  <p>However if the user is logged in and is able to visit <code>/</code> to render the index express view, there are HTML5 routes the user can take advantage of. These include urls like the following:</p>
  
  <pre><code>localhost:5000/user
  localhost:5000/profile
  localhost:5000/profile/settings
  </code></pre>
  
  <h3>The issue</h3>
  
  <p>Clearly there is no <code>router.get('/user')</code>, and there shouldn't be, as this is all front-end work done by the Angular 2 router. However, to enable linking that would allow a user to simply type <code>localhost:5000/profile/settings</code>, and have the site route you to the index file (given that you were logged in) and THEN route you (with angular 2's HTML 5 routing) to your own <code>/profile/settings</code>I had to place this piece of code in my <code>app.js</code>:</p>
  
  <pre><code>app.all("/*", function(req, res, next) {
    res.render('index');
  });
  </code></pre>
  
  <p>This gives me a big problem though. If you are not logged in and you are given the link <code>localhost:5000/profile/settings</code> it will render the index view because it only runs the <code>authenticationHelpers.isAuth</code> function on the <code>router.get('/')</code> routing code above. I would also love to be able to throw 404 errors on routes that don't exist in express, or angular.</p>
  
  <p>However in my mind, to enable this functionality express would have to know about all the HTML 5 routing options as well as the express routing options. To me, this breaks the separation of routing concerns because if I changed an HTML 5 angular route, I'd also have to make a change in express (most likely, view the solution below). I'd like all this functionality, but without this information leaking between route handlers however I simply don't see a way around it. If anyone could help me figure out a better way to do this that would be great! If the information sharing or angular routes with express routes is the only way I've developed the most optimized lean solution I could below:</p>
  
  <h3>Potential Solution</h3>
  
  <pre><code>router.get(['/', '/user/', '/profile/*'], authenticationHelpers.isAuth, function(req, res, next) {
    res.render('index');
  });
  </code></pre>