0

I have a basic 404 page that I want to display if someone types in a bad url. Our application is broken up into multiple modules, which I'll call Module1 and Module2 for this question.

I'm defining the 404 route in both Module1 and Module2 like this: 

state("404", {
    url: "/404",
    templateUrl: "page-not-found/page-not-found.html"
})

$urlRouterProvider.otherwise("/404");

In Module1, all of the routes look like this: /home, /something, /somethingelse

In Module2, all of the routes look like this: /module2/home, /module2/something, /module2/somethingelse

All of those routes have different templateUrl paths.

When I type /badroute, everything works fine. I get the 404 page and there is much rejoicing (yaaaaaaay). However, when I type /module2/badroute, I don't get to the page and instead get a generic Angular error. Even if I changed the names and/or url's of the states, the same thing issue occurred because they were pointing to the same file.

When I set the 404 templateUrl to a different file path for Module2, everything worked as I expected; both /asdf and /module2/asdf took me to their respective 404 pages. As I don't want to create several 404 error pages, how can I have routes in different modules point to the same html file without it blowing up in my face? There is no parent-child relationship among the modules; they're all different chunks of the application.

Yatrix
  • 13,361
  • 16
  • 48
  • 78
  • Is this what you are looking for? http://stackoverflow.com/questions/23281351/angular-ui-router-handling-404s – Brian May 25 '16 at 20:45
  • What is exactly the "generic Angular error" that you wrote about? Maybe that can shed some light on what's happening? – Ilya Chernomordik May 25 '16 at 20:56

0 Answers0