ASP.Net Core + Angular 2應用程序/家庭路由

Question

我一直在爭取這一段時間，並決定寫一篇文章。

我正在ASP.Net Core 5.0和Angular 2上使用VS2017構建一個簡單的單頁應用程序，這個應用程序來自ASP.NET Core Template Pack中的一個模板。該應用程序應該管理聯繫人列表數據庫。

我想到的想法是，默認開始'/ home'頁面應該顯示使用HomeComponent的聯繫人列表。所有的路由都可以正常工作，但是當應用開始使用或者當我試圖路由到'/ home'時，它會繼續使用ASP Home視圖的Index.cshtml頁面，而不是使用Angular路由。

任何想法如何使它始終貫穿Angular？我想把HomeComponent和'/ home'路線對齊，但是它會一直到ASP頁面，這裏只是說'Loading ...'，我並不需要（我認爲）。

我已經嘗試了很多不同的解決方案，但我無法獲得任何工作。我可能會丟失一些東西很明顯這裏我不是這些理由太先進了，所以如果你能保持它的基本的，請不要;-)

下面是從Startup.cs我的配置方法：

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 => 
     { 
      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",}); 
     }); 
    } 

app.module.shared.ts：

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' } 
    ]) 
]}; 

ASP的主頁Index.cshtml：

@{ 
ViewData["Title"] = "Home Page"; 
} 
<app>Loading...</app> 

<script src="~/dist/vendor.js" asp-append-version="true"></script> 
@section scripts { 
<script src="~/dist/main-client.js" asp-append-version="true"></script> 
} 

Aaaand浩me.component.ts：

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) => (this.ContactList = data.json()) 
     ); 
    } 
} 

在此先感謝你們！任何建議將被認真考慮。

Answer 1

我採取不同的方法，使用根據本link發現教程重建我的應用程序。

這是一個解決方案，您首先創建ASP.NET CORE Web App API接口並在其上安裝Angular。一點點的「工程」，直接從Visual Studio工作，並且花費很少的時間來設置。

Answer 2

是否有一個原因，你爲什麼使用asp.net角？我高度建議你使用角度cli。使用angular + asp.net導入庫和發佈非常困難。

採用了棱角分明CLI也將永遠是「角」