0

My bootup Angular2 component has a routing table 

@RouteConfig([
        { path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
        { path: '/search', name: 'Search', component: SearchComponent },
        { path: '/confirm', name: 'Confirm', component: ConfirmComponent },
        { path: '/office', name: 'Office', component: OfficeComponent }
    ])

There is a <base href="/"> in the SPA index.html and the whole app works perfectly when served up from node lite.

I'm now running it on IIS in Azure and have it all working apart from the routing. The root default route works - but all other navigation fails with a 404.

I using [routerLink]="['Search']" for my links.

There are a couple of similar questions on S/O - but no solution I can find.

Gary Liu
  • 13,758
  • 1
  • 17
  • 32
Alan Stephens
  • 569
  • 5
  • 14
  • **Question**: `useAsDefault: true` has been deprecated since long time. you are using old router? – Pankaj Parkar Oct 20 '16 at 14:39
  • possibly - I'm using out the box vs2015 startup files - i'll have a look - thanks – Alan Stephens Oct 20 '16 at 14:41
  • What Angular2 version are you using? This `@RouteConfig()` is gone since months. The server needs to support HTML5 pushState http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser You need to tweak the IIS configuration. Express supports this by default. – Günter Zöchbauer Oct 21 '16 at 05:06
  • I'm using an old Angular stack. The console was telling me routerLink could not be found and I seem to have improved it by adding the import and [RouterLink] directive to the root component. I think this has fixed it .. but yes - I will upgrade .. – Alan Stephens Oct 21 '16 at 13:55

2 Answers2

0

Adding [RouterLink] directive to root application component and making sure all links used [routerLink] in a tags has fixed the problem. I was also on an older version of Angular 2 which has probably not helped.

Alan Stephens
  • 569
  • 5
  • 14
0

Angular 2 routing (with hash) will work without any issue on IIS. Just create default URL rewrite rule which will redirect all the requests to index.html file of your angular app. Rule will redirect all requests to index.html except for required js files and actual angular app urls (i.e. index.html or index.html#/{route-value}.

EX: <rules> <rule name="Default"> <match url="(.* ).js|index.html(.*)" negate="true" /> <action type="Rewrite" url="/index.html" /> </rule> </rules>

Angular 2 routing (without hash) will not work with IIS. In case of pure HTML application IIS will be routing the incoming request and it will redirect the request to error page if such page does not exist at that location.

In case of .Net MVC application you can create a default route to handle all the incoming request url's and redirect it to your angular index view.

Ex Route for MVC application:

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


public class AppFeatureUrlConstraint : IRouteConstraint
    {
    public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
    {
    if (values[parameterName] != null)
    {
        var url = values[parameterName].ToString();
        if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
            return true;
        else
            return false;
    }
    return false;
    }
}
Arash
  • 56
  • 4