Deep linking with route param fails

401 views
Skip to first unread message

HisDivineShadow

unread,
Jun 27, 2016, 9:57:53 AM6/27/16
to AngularJS
When I navigate to a deep link url in my app directly (i.e. by clicking a link in an email or just typing the full url in the address bar) the app loads and displays the view I've requested.  However if that URL has a route parameter I get an error.  

Example url that works:  http://localhost:8088/homedetail/

Example url that doesn't work: http://localhost:8088/homedetail/1


For the URL that doesn't' work I get the following error:

Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:8088/homedetail/app/app.js
   at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:8088/node_modules/zone.js/dist/zone.js:769:30)
   at XMLHttpRequest.ZoneTask.invoke (http://localhost:8088/node_modules/zone.js/dist/zone.js:423:34)


I'm using the new v3 router and here are the routes that I have configured

export const routes: RouterConfig = [
    { path: '', component: Login },
    { path: 'login', component: Login },
    { path: 'register', component: RegisterUser },
    { path: 'portalhome', component: PortalHome, canActivate: [AuthGuard] },
    { path: 'customerprofile', component: CustomerProfile, canActivate: [AuthGuard] },
    { path: 'homedetail/:homeId', component: HomeDetail, canActivate: [AuthGuard] }
];

 
I don't understand why it's trying to load an app located at the subdirectory or the requested URL when a route paramater is specified.  I'm using this in an MVC project where all routes are mapped to the index view of the home controller (which is the root of the website).


            routes.MapRoute(
                name: "Default",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );


Lucas Lacroix

unread,
Jun 27, 2016, 10:03:16 AM6/27/16
to ang...@googlegroups.com
You need to change your webserver's router to point all of those paths back to the real applications root path. This isn't something that Angular can do for you.

This is why I chose to use the HashLocationStrategy instead of the default. That way, I do not need to much about with the webserver's routing.

-Luke

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.



--
Lucas Lacroix
Computer Scientist
System Technology Division, MEDITECH

HisDivineShadow

unread,
Jun 27, 2016, 11:21:27 AM6/27/16
to AngularJS
It does do that, that is what the {*url} parameter is doing.  The error shown is in SystemJS which wouldn't be getting loaded if the MVC routing weren't routing correctly to the root app correctly.

Lucas Lacroix

unread,
Jun 27, 2016, 12:22:01 PM6/27/16
to ang...@googlegroups.com
What does the app.js URL look like when you got to "/homedetail/"?

HisDivineShadow

unread,
Jun 27, 2016, 12:30:07 PM6/27/16
to AngularJS
I get the exact same error when I use that URL (i.e. a trailing slash without the parameter).

Lucas Lacroix

unread,
Jun 27, 2016, 12:51:56 PM6/27/16
to ang...@googlegroups.com
The previous, now depracted, RC1 router specified that you had to have a "<base>" element in your HTML like this:
<!DOCTYPE html>
<html>
<head>
    <base href="/" />
...

Does the V3 router not have a similar requirement? If it does not, then I see know way for Angular to magically know how to construct the URLs correctly (ie. not based off the current URL but based off of some other URL).

-Luke

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

HisDivineShadow

unread,
Jun 27, 2016, 12:57:47 PM6/27/16
to AngularJS
That was my problem.  My <base> tag had a "." in it and not "/".

Thanks for the help.
Reply all
Reply to author
Forward
0 new messages