ASP.Net Core + Angular 2 app /home 路由

Question

我已经为此苦恼了一段时间，决定写一篇 post。

我正在 ASP.Net Core 5.0 和 Angular 2 上使用 VS2017 在取自 ASP.NET 核心模板包的模板上构建一个简单的单页应用程序。该应用程序应该管理联系人列表数据库。

我的想法是默认起始“/home”页面应该使用 HomeComponent 显示联系人列表。所有路由都工作正常，但是当应用程序启动时或每当我尝试路由到“/home”时，它会继续转到 ASP 主视图的 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 home.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 和 angular 有什么原因吗？我强烈建议您使用 angular cli。使用 angular + asp.net.

导入库和发布非常困难

使用 angular cli 也将始终是 "angular"

Answer 2

我采用了不同的方法并使用在此 link 下找到的教程重建了我的应用程序。

这是您首先创建 ASP.NET CORE Web App API 界面并在其上安装 Angular 的解决方案。 'engineering' 的一点点，直接在 Visual Studio 下工作，并且只需很少的时间即可设置。

Answer 3

我认为让您感到困扰的是 您希望拥有单一应用程序并让 Angular 执行客户端路由并发布 WEB.API 回调到 .NET Core Web API。因此，一旦您在 www.example/subpage 等页面上按 F5 重新加载该页面，就可以避免被踢回主页。

解决方案是创建两个 MVC 路由。 第一条路由将处理重定向到 Web.API 的调用，第二条路由将接受任何 Angular URL 请求，并忽略所有内容并将调用转发给 Home 控制器。

要实现这一目标，您需要：

1. 在 Views\Home\Index.cshtml 中包含您的 Angular 组件标签（我的是 app-root）
2. 在 Startup.cs 中，就在 "app.Run" 之前添加以下代码
app.UseMvc(cfg => { cfg.MapRoute( "API", "api/{controller=*}/{action=*}/{id?}"); cfg.MapRoute( "Default", // Route name "{*catchall}", // URL with parameters new { controller = "Home", action = "Index" }); });

ASP.Net Core + Angular 2 app /home 路由

ASP.Net Core + Angular 2 app /home routing

asp.net-mvc

single-page-application

angular2-routing