CODEWITHSUNDEEP
asp.net-mvcangularasp.net-web-apiangular2-routing
ByQ
ByQ

Reputation: 37

Angular routing redirect to that same page all time

I have problem with routing in my application. I use Angular2+ and WebApi2. I created Angular from quickstart project and I added it to my WebApi solution. After configurating it, I launched first time app allthing work fine. Problems appear after I added routing. When I try to navigate to link included in routing table, the browser redirect me all time to one component. I searched how to deal with it but I didn't find anything. Below I present codes and file names:

RouteConfig.cs

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
     routes.MapRoute(
        name: "Default",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

Share _Layout.cshtml

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/src/systemjs.config.js"></script>
<script>
    System.import('./src/main.js').catch(function (err) { console.error(err); });
</script>

system.config.js

packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: '/src/systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomePage } from './HomePage.component';
import { Test } from './Test.component';
import { HttpModule } from '@angular/http';

const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomePage },
    { path: 'test', component: Test },
    { path: '**', component: HomePage }
];

@NgModule({
    declarations: [
        AppComponent, HomePage, Test
    ],
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [HomePage]
})
export class AppModule { }

Index.cshtml <home-page></home-page>

Upvotes: 0

Views: 1780

Answers (1)

ByQ
ByQ

Reputation: 37

Answer: all problems are caused by @RenderBody(). When I moved <home-page></home-page> under @RenderBody() all is working fine.

Upvotes: 1

Related Questions