.NET MVC 5 中的 Angular 6 应用程序，角度路由不起作用

我已将 Angular 6 应用程序嵌入到现有的 .NET MVC 5 应用程序中。我在 MVC 应用程序 (RouteConfig.cs) 中添加了一条指向 Home/Index 的后备路由，因此“未知”路由将传递到 Angular 应用程序的路由器模块 (app.routes.ts)。 Angular 应用程序的路由似乎没有触发，与路径关联的组件没有加载。

IDE是Visual Studio 2017 Enterprise 15.6.7，MVC应用程序是标准.NET Web应用程序（不是.NET Core），MVC 5.2.3.0； Node.js 8.11.3、npm 6.3.0、Typescript 2.9.2、Angular CLI 6.0.8、Angular 6.0.3；引导程序 3.3.7、jquery 3.3.1；操作系统：Win 10 x64。

MVC 应用程序的 RouteConfig.cs 如下；包罗万象的路线位于底部。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace Ang2Mvc5_0
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "mvc",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

            // This is a catch-all for when no other routes match the request; let the Angular 2 router take care of it...
            routes.MapRoute(
                name: "default",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2 app
            );
        }
    }
}

当我创建 Angular 应用程序（使用 CLI）时，Typescript 的 package.json 条目默认为 2.7.2； package.json 如下，ngf-bootstrap 条目特定于 PluralSight 教程。

我错过了什么吗？

{
    "name": "temp-app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^6.0.3",
        "@angular/common": "^6.0.3",
        "@angular/compiler": "^6.0.3",
        "@angular/core": "^6.0.3",
        "@angular/forms": "^6.0.3",
        "@angular/http": "^6.0.3",
        "@angular/platform-browser": "^6.0.3",
        "@angular/platform-browser-dynamic": "^6.0.3",
        "@angular/router": "^6.0.3",
        "core-js": "^2.5.4",
        "ngf-bootstrap": "0.0.5",
        "rxjs": "^6.0.0",
        "toastr": "^2.1.4",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.6.8",
        "@angular/cli": "~6.0.8",
        "@angular/compiler-cli": "^6.0.3",
        "@angular/language-service": "^6.0.3",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "^5.4.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2"
    }
}

app.routes.ts 如下；这真的很简单，到目前为止，我在应用程序开发方面还没有取得很大进展。

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { EventsListComponent } from './events/events-list.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'

const routes: Routes = [
    {
        path: 'events',
        component: EventsListComponent
    },
    {
        path: 'events/:id',
        component: EventDetailsComponent
    },
    {
        path: '',
        redirectTo: '/events'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})

export class AppRoutingModule {
}

EventsAppModule 如下；注意@第16行，我已经导入了AppRoutingModule (app.routes.ts)，我可以注释此行以禁用路由。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { EventsAppComponent } from './events-app.component';
import { EventsListComponent } from './events/events-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';
import { AppRoutingModule } from './app.routes';

@NgModule({
    imports: [
        BrowserModule
        , AppRoutingModule
    ],
    declarations: [
        EventsAppComponent,
        EventsListComponent,
        EventThumbnailComponent,
        EventDetailsComponent,
        NavBarComponent
    ],
    providers: [
        EventService,
        ToastrService
    ],
    bootstrap: [EventsAppComponent]
})

export class EventsAppModule { }

如前所述，当尝试使用路由时，使用<router-outlet></router-outlet>在应用程序的主要组件/页面中添加标签时，EventsListComponent 无法加载（我得到一个空白页面）。如果我从应用程序的模块中注释 AppRoutingModule 并切换到<events-list></events-list>在应用程序的主组件中，EventsListComponent 可以正常加载（它显示事件列表，每个事件都封装在 EventThumbnailComponent 中）。

另外，它不加载http://localhost:39420/事件 http://localhost:39420/events当我跑步时；它默认为 root，例如 localhost:39420/ ...如果我在 url 中输入“/events”，我不会收到错误，只是一个空白页面。如果我尝试再次使用 localhost:39420/events/1 ...获取 EventDetailsComponent，它只会呈现一个空白页面。

redirectTo期望路由器应导航到的确切路径。所以它期望一个/在您可能定义的路由路径之前。

Replace redirectTo: 'events' with redirectTo: '/events'在你的路由配置中，它应该加载EventsListComponent组件正确。

还添加一个pathMatch: 'full'到这条路线：

    {
        path: '',
        redirectTo: '/events',
        pathMatch: 'full'
    }

这是一个StackBlitz 项目 https://stackblitz.com/edit/angular-sample-routing-eg来帮助你。