Connect Angular routing with MVC routing

问题

In my new project in WebApi2 I use Angular2 framework. After configuring and adding angular I tried to call first compnent. And there is my question. How to connect angular routing with webapi2? I add new class where I add routing: I call <home-page> in MVC controller view Index.cshtml

app.routing.ts

const appRoutes: Routes = [
    { path: 'home', component: HomePage },
    { path: 'test', component: AppComponent}
];

app.component.ts

@Component({
    selector: 'my-app',
    templateUrl: './app.template.html',
})

HomePage.component.ts

@Component({
   selector: 'home-page',
   templateUrl: './HomePage.template.html',
   providers: [GetContent]
})

system.config.js

paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the Angular folder
  'app': 'Angular',
  // angular bundles ...
}

meta: {
      './*.js': {
        loader: '/systemjs-angular-loader.js'
      }
}

shared _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="/systemjs.config.js"></script>
<script>
    System.import('Angular/main.js').catch(function (err) { console.error(err); });
</script>

I included it to app.module.ts to imports section. When I launch application I see information from my HomePage component but when I add route path /test, it redirects me to HomePage component. Where have I made a mistake?

回答1:

Can you try edit your app.module into this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomePageComponent } from './home-page.component';


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

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

回答2:

I resolved problem. I called <home-page> in Index.cshtml and that view was rendered from _Layout.cshtml. When I moved called component to _Layout.cshtml all things go correct. Thanks for help!

来源：https://stackoverflow.com/questions/51637430/connect-angular-routing-with-mvc-routing