Angular2 Routing with .NET Core

Question

I have a ASP.NET CORE app that uses angular2 routing. Running local routes resolve as expected. When I publish to the server (running IIS 7) the routes appear to resolve to the server root and not the website they are deployed to, however, they still render the page. In the example below the "page url" is the page I navigate to but the "result url" is what is displayed in the browser address bar.

page url --> http://myserver/myapp/home

result url --> http://myserver/home

Any ideas on why this is happening? Is this an IIS setting, or Angular routing issue or a .NET CORE config issue?

Here is the way I have my routes configured in angular2.

const routes: ClientRouterConfig = [
    { displayName: 'Dashboard', icon: 'fa fa-tachometer', path: '', redirectTo: 'home', pathMatch: 'full' },
    { showInNavigationMenu: true, displayName: 'Dashboard', icon: 'fa fa-tachometer', path: 'home', component: HomeComponent },
    { showInNavigationMenu: true, displayName: 'New Work Order', icon: 'fa fa-plus', path: 'workorder', component: WorkorderComponent },
    { showInNavigationMenu: false, displayName: 'Work Order', icon: 'fa fa-wrench', path: 'workorder/:id', component: WorkorderComponent },
    { showInNavigationMenu: false, displayName: 'New Task', icon: 'fa fa-user', path: 'task/create/:woid', component: TaskComponent },
    { showInNavigationMenu: false, displayName: 'Task', icon: 'fa fa-user', path: 'task/:id', component: TaskComponent },
    { displayName: 'Dashboard', icon: 'fa fa-tachometer', path: '**', redirectTo: 'home' } //this must be last
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {
    getRoutes() {
        return routes;
    }
}

Have you try to add <base href="/myapp/" inside head tag of html of index file — happyZZR1400
– happyZZR1400, Commented Mar 24, 2017 at 6:28
boom that was it! Thanks so very much! If you want to post that as the answer I'll mark it correct — hewstone
– hewstone, Commented Mar 24, 2017 at 6:37

Mr Lister · Accepted Answer · 2017-03-30 16:43:41Z

1

I found it here:

You must add a <base href> element to the app's index.html for pushState routing to work. The browser uses the <base href> value to prefix relative URLs when referencing CSS files, scripts, and images.

So in your case I guess it's:

<base href="/myapp/" >

edited Mar 30, 2017 at 16:43

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Mar 24, 2017 at 7:23

happyZZR1400

2,4134 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Routing with .NET Core

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related