Handle unknown routes in Angular by showing Page Not Found error

client/app/components/app-view/index.js

@@ -44,17 +44,21 @@ class AppViewComponent {
     $rootScope.$on('$routeChangeStart', (event, route) => {
       this.handler.reset();
 
-      if (route.$$route.authenticated) {
+      // In case we're handling $routeProvider.otherwise call, there will be no
+      // $$route.
+      const $$route = route.$$route || { authenticated: true };
+
+      if ($$route.authenticated) {
         // For routes that need authentication, check if session is already
         // loaded, and load it if not.
         logger('Requested authenticated route: ', route);
         if (Auth.isAuthenticated()) {
-          this.applyLayout(route.$$route);
+          this.applyLayout($$route);
         } else {
           event.preventDefault();
           // Auth.requireSession resolves only if session loaded
           Auth.requireSession().then(() => {
-            this.applyLayout(route.$$route);
+            this.applyLayout($$route);
             $route.reload();
           });
         }

client/app/config/index.js

@@ -103,6 +103,18 @@ function registerPages() {
       });
     });
   });
+
+  ngModule.config(($routeProvider) => {
+    $routeProvider.otherwise({
+      resolve: {
+        // Ugly hack to show 404 when hitting an unknown route.
+        error: () => {
+          const error = { status: 404 };
+          throw error;
+        },
+      },
+    });
+  });
 }
 
 function registerFilters() {