0

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>

8
  • replace <home-page></home-page> by <app-root></app-root> in your index Commented Aug 2, 2018 at 21:22
  • What is it change when I bootstrap HomePage? Now I see in console The selector "home-page" did not match any elements Commented Aug 2, 2018 at 21:26
  • your index is the enter point is has to containe only <app-root></app-root> and bootstrap: [HomePage] will load HomePage component Commented Aug 2, 2018 at 21:30
  • and your HomePage must contain <router-outlet></router-outlet> to load your routes Commented Aug 2, 2018 at 21:33
  • As you said, I added to HomePage <router-outlet> byt I still see in the console that same error: The selector "home-page" did not match any elements Commented Aug 2, 2018 at 21:39

1 Answer 1

1

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.