ASP.Net Core + Angular 2 app/home routing

Question

私はこれでしばらくの間戦っていて、投稿を書くことに決めました。

私は、ASP.NET Core Template Packから取得したテンプレートに対して、ASP.Net Core 5.0とAngular 2のVS2017を使用して単純なシングルページアプリケーションを構築しています。アプリケーションは連絡先リストデータベースを管理することになっています。

私が念頭に置いて考えているのは、デフォルトの開始 '/ home'ページがHomeComponentを使用して連絡先のリストを表示しているということです。すべてのルーティングはうまく動作しますが、アプリが起動しているときや、「/ home」にルーティングしようとしているときは、Angularルーティングを使用する代わりにASPホームビューのIndex.cshtmlページに移動し続けます。

どのようにすればいいのでしょうか？私はHomeComponentを '/ home'ルートに揃えたいと思っていましたが、代わりにASPページに移動し続けます。そこには、私が本当に必要としない「Loading ...」としか言いようがありません。

私はさまざまな解決方法を試しましたが、何もできませんでした。

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

：私はここにStartup.csからの私の設定方法だ、;-)

をしてくださいあなたは基本的にそれを維持することができますので、もし私は、これらの理由で、あまりにも進んでいないんだと、ここで何かを明らかに不足している可能性があります

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

「角度」になります。

これは、最初にASP.NET CORE Web App APIインターフェイスを作成し、その上にAngularをインストールするソリューションです。少しの「エンジニアリング」がVisual Studioから直接的に機能し、設定に時間がかかりません。

Answer 2

なぜあなたは角度を持ってasp.netを使用していますか？私はあなたに角張ったcliを使うことを強く勧めます。 angular + asp.netでは、ライブラリやパブリッシングをインポートすることは非常に難しいです。

角度CLIを使用すると、またいつも私は別のアプローチを取り、このlink下にあるチュートリアルを使用して自分のアプリケーションを再構築