title: ASP.Net Core + Angular 2 app /home routing
body: <p>I've been fighting with this for a while now and decided to write a post.</p>
  
  <p>I'm building a simple Single Page Application using VS2017 on ASP.Net Core 5.0 and Angular 2 over a template taken from ASP.NET Core Template Pack. The app is supposed to manage a contact list database.</p>
  
  <p>The idea I have in mind is that the default starting '/home' page should be displaying the list of contacts using HomeComponent. All routing works fine, but when app is getting started or whenever I'm trying to route to '/home', it keeps going to ASP Home view's Index.cshtml page instead of using Angular routing. </p>
  
  <p>Any idea how to make it go through Angular at all times? I wanted to align the HomeComponent with '/home' route but instead it keeps going to ASP page which is only there to say 'Loading...' which I don't really need (I think).</p>
  
  <p>I've tried a lots of different solution but I wasn't able to get anything to work. I might be missing something obvious here as I'm not too advanced on these grounds, so if you can keep it basic, please do ;-)</p>
  
  <p>Here's my Configure method from Startup.cs:</p>
  
  <pre><code>public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
      {
          loggerFactory.AddConsole(Configuration.GetSection("Logging"));
          loggerFactory.AddDebug();
  
          if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
              app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
              {
                  HotModuleReplacement = true
              });
          }
          else
          {
              app.UseExceptionHandler("/Home/Error");
          }
  
          app.UseStaticFiles();
  
          app.UseMvc(routes =&gt;
          {
              routes.MapRoute(
                  name: "default",
                  template: "{controller}/{action}/{id}",
                  defaults: new { controller = "Home", action = "Index" });
  
              routes.MapSpaFallbackRoute(
                  name: "spa-fallback",
                  defaults: new { controller = "Home", action = "Index",});
          });
      }
  </code></pre>
  
  <p>app.module.shared.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './components/app/app.component'
  import { NavMenuComponent } from './components/navmenu/navmenu.component';
  import { DetailsComponent } from './components/details/details.component';
  import { EditComponent } from './components/editContact/editContact.component';
  import { NewContactComponent } from './components/newContact/newContact.component';
  import { HomeComponent } from './components/home/home.component';
  import { ContactServices } from './services/services';
  
  export const sharedConfig: NgModule = {
  bootstrap: [ AppComponent ],
  declarations: [
      AppComponent,
      NavMenuComponent,
      DetailsComponent,
      EditComponent,
      NewContactComponent,
      HomeComponent
  ],
  providers: [ContactServices],
  imports: [
      RouterModule.forRoot([
          { path: '', redirectTo: 'home', pathMatch: 'full' },
          { path: 'home', component: HomeComponent },
          { path: 'details', component: DetailsComponent },
          { path: 'new', component: NewContactComponent },
          { path: '**', redirectTo: 'home' }
      ])
  ]};
  </code></pre>
  
  <p>ASP's Home Index.cshtml:</p>
  
  <pre><code>@{
  ViewData["Title"] = "Home Page";
  }
  &lt;app&gt;Loading...&lt;/app&gt;
  
  &lt;script src="~/dist/vendor.js" asp-append-version="true"&gt;&lt;/script&gt;
  @section scripts {
  &lt;script src="~/dist/main-client.js" asp-append-version="true"&gt;&lt;/script&gt;
  } 
  </code></pre>
  
  <p>Aaaand home.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ContactServices } from '../../services/services';
  import { Response } from '@angular/http';
  
  @Component({
  selector: 'home',
  templateUrl: './home.component.html'
  })
  export class HomeComponent {
  public ContactList = [];
  public constructor(private conService: ContactServices) {
      this.conService.getContactList()
          .subscribe(
          (data: Response) =&gt; (this.ContactList = data.json())
          );
      }
  }
  </code></pre>
  
  <p>Thanks in advance guys! Any advice will be appreciated.</p>